如何使用CSS制作div三角形的顶部和底部？
晃
现在我明白了：
它的三个DIV。顶部的第一个是三角形的，中间的是没有任何形状的普通DIV，底部的第三个是三角形的。所有形状都是通过CSS（边界透明度）形成的
我想将三个DIV合并为一个而不丢失整个结构的形状。这可能吗？
这是我的HTML代码：
<div id="triangle1"></div> /* triangle at the top */
<div id="center">
<p>Text Text Text</p>
<div id="triangle2"></div> /* triangle at the bottom */
这是CSS代码：
#center {
background-color: #E0E0E0;
position: absolute;
width: auto;
height: auto;
top: 100px;
left: 20%;
right: 20%;
text-align: justify;
padding-left: 3%;
padding-right: 3%;
}
#triangle1 {
width: 0;
height: 0;
top: 20px;
border-style: solid;
border-width: 0 1143px 80px 0px;
border-color: transparent transparent #E0E0E0 transparent;
left: 20%;
right: 20%;
position: absolute;
}
#triangle2 {
width: 0;
height: 0;
top: 312px;
border-style: solid;
border-width: 80px 0 0 1152px;
border-color: #E0E0E0 transparent transparent transparent;
left: 20%;
right: 20%;
position: absolute;
}
我想将＃triangle1和＃triangle2的代码合并到#center中，而不会失去它现在的外观（如屏幕截图所示）。但是如何？
到目前为止谢谢你。
周杰伦
transform: skewY(3deg);
变换父级会有副作用，它的后代（带文本的段落）也将倾斜。一个简单的解决方法是反转对后代元素的转换。
-moz-transform: skewY(3deg);
-webkit-transform: skewY(3deg);
-o-transform: skewY(3deg);
-ms-transform: skewY(3deg);
transform: skewY(3deg);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何制作三角形div？
- 2
边框顶部和底部没有三角形切出
- 3
Div底部的中心三角形
- 4
三角形底部形状的 CSS 标题
- 5
使用CSS边框的三角形和倒三角形
- 6
使用CSS边框的三角形和倒三角形
- 7
旋转三角形以使完整旋转后的顶部和底部三角形之间没有间隙的最佳方法？
- 8
使用：before和：after的div上的CSS三角形-怪异的偏移量，如何解决？
- 9
如何使用CSS将div设置为三角形？
- 10
如何使用CSS编写三角形的div？
- 11
如何使用CSS创建可缩放至父div高度的三角形？
- 12
如何仅使用 css 创建一个三角形的 div？
- 13
如何制作三角形投影？
- 14
如何制作重叠的三角形
- 15
如何制作三角形JAVA
- 16
android: 如何制作三角形布局
- 17
使用java制作三角形
- 18
边框顶部的阴影和三角形在css中向下
- 19
如何制作带有凹形左边框的div三角形？
- 20
如何在CSS功能区菜单中制作右侧三角形？
- 21
CSS三角形和IMG
- 22
旋转和重叠的CSS三角形
- 23
仅使用CSS创建三角形
- 24
使用CSS，Canvas或SVG的三角形
- 25
如何使用python循环制作数字三角形？
- 26
如何使用for循环javascript制作三角形
- 27
在线条的底部或顶部绘制三角形
- 28
如何使用JavaFX创建三角形？
- 29
如何使用JavaFX创建三角形？
我来说两句