问题描述
如何创建以下形状
使用CSS还是SCSS? 我的标记:
<div class="shape-section">
<div class="line shape-line-one"></div>
<div class="line shape-line-two"></div>
<div class="line shape-line-three"></div>
<div class="line shape-line-four"></div>
</div>
和样式:
.shape-section {
position: relative;
.line {
width: 175px;
height: 22px;
background-color: grey;
&.shape-line-one {
border-radius: 0 20px 20px 0;
position: absolute;
transform: rotate(146deg);
top: -72px;
right: 0;
z-index: 0;
}
&.shape-line-two {
border-radius: 0 20px 20px 0;
position: absolute;
transform: rotate(54deg);
top: -20px;
right: -20px;
z-index: 0;
}
&.shape-line-three {
border-radius: 0 20px 20px 0;
position: absolute;
transform: rotate(45deg);
top: -155px;
z-index: 0;
}
&.shape-line-four {
border-radius: 0 20px 20px 0;
position: absolute;
transform: rotate(325deg);
top: -60px;
left: 13px;
z-index: 0;
}
}
}
我的方法正确吗?请帮我画这部分。我的最终目标是使用CSS或SCSS绘制类似附加图像的结构。
解决方法
这是一个带有旋转和渐变的想法:
.box {
width: 200px;
height: 150px;
position: relative;
overflow:hidden;
}
.box span::before,.box span::after {
content: "";
position: absolute;
height: 120%;
width: 20px;
background: #000;
transform: rotate(60deg);
}
.box span:first-child::before{
top: 0;
right: 10%;
border-radius: 0 0 50px 50px;
transform-origin: top right;
}
.box span:first-child::after {
bottom: 0;
left: 10%;
border-radius:50px 50px 0 0;
transform-origin: bottom left;
}
.box span:last-child::before,.box span:last-child::after {
height: 100%;
transform: rotate(-60deg);
}
.box span:last-child::before{
top: 0;
left: 10%;
transform-origin: top left;
background:linear-gradient(30deg,transparent 10px,#000 11px 40px,transparent 41px 50px,#000 0);
}
.box span:last-child::after {
bottom: 0;
right: 10%;
transform-origin: bottom right;
background:linear-gradient(210deg,#000 11px 50px,transparent 51px 80px,#000 0);
}
<div class="box">
<span></span>
<span></span>
</div>