我想要一個具有「左側形狀的角度」的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