我可以在CSS中做一条对角线吗？
热情的开发者
我想要这样的设计：
因此，实际上，左侧带有background-color，右侧带有background-color（divs当然很容易）。
但是我可以用CSS做对角线吗？
网络提基
您可以使用偏斜的伪元素来实现此形状：
HTML：
<div>
<h1>Your title here</h1>
</div>
CSS：
div{
padding:0 10px 10px;
background:#E7E5DD;
}
h1{
margin:0;
display:inline-block;
position:relative;
z-index:1;
padding:10px 50px 10px;
overflow:hidden;
}
h1:before{
content:'';
width:100%; height:100%;
position:absolute;
top:0; left:0;
background:#fff;
z-index:-1;
-webkit-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
transform: skewX(-20deg);
-webkit-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
我可以在CSS中做一条对角线吗？
- 2
CSS中的对角线
- 3
我可以使用旋转功能全天候移动一条线吗？
- 4
我可以在海拔高度的地图上画一条线吗？
- 5
我们可以用一条数据线创建散点图吗
- 6
我可以创建没有对角线的底部边框吗？
- 7
我可以创建没有对角线的底部边框吗？
- 8
Dia中的UML，继承箭头对角线吗？
- 9
我可以在我的快速应用中为一条路线使用多方服务吗？
- 10
我想防止Pygame中的对角线运动
- 11
使用CSS在div背景中绘制对角线
- 12
我可以在JUnit测试中打印一条信息消息吗？
- 13
我可以在一条语句中从两个表中删除条目吗？
- 14
我们可以从 postgresql 中获取 totalcount 和最后一条记录吗
- 15
我怎样才能在 div 后面划一条线不显示在 css 中的悬停？
- 16
绘制我的matplotlib散点图的对角线？
- 17
2个路由器可以连接到一条Internet线吗
- 18
如何使用CSS绘制对角线
- 19
响应对角线CSS
- 20
CSS使右边框成为对角线
- 21
我如何构建一个函数来提取R中较大的对角线块矩阵
- 22
我有一个NXN矩阵，我想用对角线项获得一个矢量，用所有不在对角线中的项来获取花药
- 23
在HTML中显示对角线分数
- 24
矩阵中的对角线-Python
- 25
在多索引中访问对角线
- 26
从列表中找出方阵的对角线
- 27
如何在CSS中实现对角线删除线文字？
- 28
是否可以在gnuplot中每十行画一条线？
- 29
视线对角线
我来说两句