如何使用 css 或 scss 创建附加形状?
How can I create attached shape using css or scss?
如何创建以下形状
使用 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, transparent 10px, #000 11px 50px, transparent 51px 80px,#000 0);
}
<div class="box">
<span></span>
<span></span>
</div>
如何创建以下形状
使用 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, transparent 10px, #000 11px 50px, transparent 51px 80px,#000 0);
}
<div class="box">
<span></span>
<span></span>
</div>