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. node.js - 怎么在初始化的时候使得一个子组件不加载?2. 代码如下,java用BigDecimal四舍五入怎么还有问题呀?哪种方式是完全没有问题的?3. angular.js - 请教angularjs里html和js通信的问题4. 求解决方法:Parse error: syntax error, unexpected5. 没太明天这样写的作用6. 新人做网站求帮助7. 老师所用的IDE开发环境是什么?8. 为什么一个类里面只能有一个私有的 我不知道按了什么谁给解释一下9. 请问“由于 Cookie “PHPSESSID”的“SameSite”属性设置为“None”,但缺少“Secure”属性,此 Cookie 未来将被拒绝。”请问出现这个问题怎么办?10. 看这个课程前需要具备什么知识点?