我正在嘗試用 CSS 繪制 4 條平行線。我正在使用 css 的傾斜功能來處理這些線條角度。但它沒有像我預期的那樣作業，我需要更多的線條之間的空間。我應該只使用 CSS 和轉換來處理它嗎？
.line {
width: 100%;
height: 3px;
background-color: #1e1e1e;
position: absolute;
left: 0;
}
.line.line-1 {
top: 100px;
transform: skewY(20deg);
}
.line.line-2 {
top: 150px;
transform: skewY(28deg);
}
.line.line-3 {
top: 200px;
transform: skewY(35deg);
}
.line.line-4 {
top: 250px;
transform: skewY(41deg);
}<div class="wrapper">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
<div class="line line-4"></div>
</div>這是我要實作的背景：
uj5u.com熱心網友回復：
使用變換旋轉，將原點設定為左側并將其重新定位到頁面上的原點。
.line {
width: 100%;
height: 3px;
background-color: #1e1e1e;
position: absolute;
transform-origin: left;
left: 100px;
top: 0;
}
.line.line-1 {
transform: rotate(20deg);
}
.line.line-2 {
transform: rotate(40deg);
}
.line.line-3 {
transform: rotate(70deg);
}
.line.line-4 {
transform: rotate(105deg);
}<div class="wrapper">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
<div class="line line-4"></div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/526146.html
標籤：css转换
上一篇：在創建具有自定義css樣式的雙滾動時，拐角處有一個小白方塊。我怎樣才能讓它不可見？
下一篇：將工具提示與相對父級對齊