css 实现梯形的效果,以及梯形在实际项目中运用

有时候,有些简单的图形,我们前端也可以自己画出来,省的ui在给我们切图了,毕竟能用代码实现的就用代码去实现了,那样性能也会好点呢。
毕竟几行代码能实现的再用图片其实没必要的。

其实有一个就是实现梯形的效果
在这里插入图片描述
其实这个看似简单的吧,但也需要你会制作三角形, 然后将三角形通过位移或者定位来移动到 一个长方形的两侧

组成: 中间一个长方形, 两侧有两个三角形,依次放到指定位置

 

其实主要还是css的掌握呢,html就一个div元素,然后通过伪类生成的

其实这个还有一个比较常见的效果就是
在这里插入图片描述
这个效果还是在实际中还是能运用到了

 
<div class="parent"><div class="left">你好div><div class="right">javascriptdiv>div>

其实画一些简单的图形 是省了图片,但是代码量 确实会增加不少,里面本来有些样式代码可以合并,我为了方便观看就没有合在一起的,嘿嘿
哎 这几天有点忙。好久没有更新博客。以后还是尽量一天一篇呢。加油

关注我。持续更新前端知识,


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部