CSS3 画如下图形
问题描述
请教一下CSS3怎么画出如下的tab,其中一个的样式即可
问题解答
回答1:css
*,p{margin:0;padding:0;} .demo{width:100px;height:50px;border-top:1px solid black;margin:200px;position: relative; } .demo::before{content: '';width: 50px;height: 50px;border-left: 1px solid black;transform: rotate(45deg);position: absolute;top: 10px;left: -25px; } .demo::after{content: '';width: 50px;height: 50px;border-top: 1px solid black;transform: rotate(45deg);position: absolute;top: 10px;right: -25px; }
html
<p class='demo'></p>回答2:
.trapezoid-1 {
height: 0;width: 100px;border-bottom: 100px solid #e5c3b2;border-left: 60px solid transparent;border-right: 60px solid transparent; }
相关文章:
1. javascript - JS设置Video视频对象的currentTime时出现了问题,IE,Edge,火狐,都可以设置,反而chrom却...2. python - django models 为生成的html元素添加样式。3. android - 安卓做前端,PHP做后台服务器 有什么需要注意的?4. docker-compose 为何找不到配置文件?5. python的bs4如何筛选出h1标签中的内容6. 前端 - css3 3d效果问题7. java - spring-data Jpa 不需要执行save 语句,Set字段就可以自动执行保存的方法?求解8. docker gitlab 如何git clone?9. javascript - Js 函数声明和函数表达式10. html5 - 为什么使使用vue cli 脚手架,post-css 没有自动对css3属性自动添加浏览器前缀呢?
