我想要一个具有“左侧形状的角度”的div。我怎样才能用CSS3创建这个?我假设这需要2个div?我知道我可以制作一个矩形div并填充它,并有黄色文本。虽然我不知道我能做些什么来使左边的三角形成形。它可以只完成div吗?还是需要2?寻找最好的方式来做到这一点。如何用css创建一个带有三角形形状的div?
0
A
回答
2
您可以使用linear-gradient
来实现此目的。演示:
.text {
width: 400px;
background-image: linear-gradient(45deg, transparent 50px, black 50px);
padding-left: 100px;
color: yellow;
}
<div class="text">
<h1>Some Name Here</h1>
</div>
1
为什么不尝试这样的事:
.triangle {
width: 0;
height: 0;
border: 50px solid black;
border-bottom-color: transparent;
border-left-color: transparent;
float: left;
}
.text {
width: 400px;
height: 100px;
background-color: black;
float: left;
color: yellow;
}
<div class="triangle"></div>
<div class="text"><h1>Some Name Here</h1></div>
更多这方面的信息,请参阅How do CSS triangles work?。
+3
另外,你可以使用':: before'来做到这一点,所以你不需要两个元素。 – jhpratt
+0
@jhpratt我不知道如何,但我同意,这将是更经济的方法 –
1
您可以使用伪元素::before
或::after
.triangle {
padding: 10px;
position: relative;
background-color: #000;
color: yellow;
display: inline-block;
margin-left: 40px;
}
.triangle::after {
content: "";
position: absolute;
border: 19px solid #000;
height: 0;
width: 0;
left: -38px;
top: 0;
bottom: 0;
margin: auto;
border-left-color: transparent;
border-bottom-color: transparent;
}
<div class="triangle">
text-here
</div>
样式因此。
0
您可以使用clip-path
但它有not so good browser support。我在这里使用100vmax 100vmax
来实现45度裁剪。演示:
.text {
width: 400px;
background-color: black;
-webkit-clip-path: polygon(100vmax 100vmax, 0% 0%, 100% 0%, 100% 100%);
clip-path: polygon(100vmax 100vmax, 0% 0%, 100% 0%, 100% 100%);
padding-left: 100px;
color: yellow;
}
<div class="text">
<h1>Some Name Here</h1>
</div>
相关问题
- 1. 用CSS创建三角形div
- 2. 用CSS创建一个三角形?
- 3. 建立一个形状类三角形
- 4. 创建带圆角的三角形
- 5. 带三角形边框的箱形阴影创建雪佛龙形div div
- 6. CSS - 创建高级形状。 (倒三角形?)
- 7. 如何创建一个创建一个带有方形数字的三角形的Java循环?
- 8. 如何创建带背景的三角形形状(固定高度,宽度= 100%)
- 9. 如何在Bootstrap下创建三角形形状?
- 10. 创建一个三角形格带有边框
- 11. 如何创建这个三角形thingy?
- 12. 创建完整边框三角形div
- 13. 如何使用JavaFX创建三角形?
- 14. 在创建CSS弯曲三角形弧
- 15. 创建一个三维六角形图
- 16. 如何使用一条路径在另一个三角形内创建一个SVG三角形?
- 17. 带三角形的Css边框
- 18. 如何使用CSS创建此形状?
- 19. 如何创建gradiated三角形图像
- 20. 如何创建三角形UIImage
- 21. 创建三角形音频波形
- 22. 如何创建从一个形状到另一个形状的变形效果?
- 23. 如何创建三角形可点击的div?
- 24. 如何使用CSS的div三角形的顶部和底部?
- 25. 如何用ccs创建三角形和正方形?
- 26. 如何使FAB按钮的形状像三角形一样
- 27. 使用CSS伪三角形
- 28. 创建带圆角的三角形的SVG路径
- 29. 使用Python创建一个直角三角形
- 30. 如何创建一个带有白色背景,带有三角形箭头的灰色边框的布局 - Android
的可能的复制[?如何CSS三角形工作(https://stackoverflow.com/questions/7073484/how-do-css-triangles-work) – Ivan