我正在做我的新元素,在这个元素中我需要一些不规则的结构。 其中之一是:
我取得的成绩是:
.mainkite {
width: 200px;
height: 200px;
background: #f00;
transform: skew(180deg, 180deg) rotate(45deg);
position: relative;
margin: 0px auto;
margin-top: 50px;
overflow: hidden;
}
.midLine {
border: solid 1px #000;
transform: skew(180deg, 180deg) rotate(45deg);
position: absolute;
top: 99px;
width: 140%;
left: -41px;
}
<div class="mainkite">
<div class="midLine"></div>
</div>
我怎样才能得到我想要的其余形状?
最佳答案
使用 CSS:
使用:
- 仅 HTML 和 CSS
- 2个元素和2个伪元素
- 内线的边界半径和变换
- border technique对于底部三 Angular 形
.kite {
position: relative;
width: 200px; height: 200px;
background: #f00;
transform: rotate(45deg);
margin: 0px auto;
margin-top: 50px;
}
.kite:before, .kite:after {
content: '';
position: absolute;
}
.kite:before {
top: 50%; left: -20.5%;
width: 141%;
margin-top:-1px;
border-top: 2px solid #000;
transform: rotate(45deg);
}
.kite:after {
top: 0; left: 0;
width: 198px; height: 198px;
border-top-left-radius: 100%;
border-left: 2px solid #000;
border-top: 2px solid #000;
}
.tail {
position: absolute;
top: 199px; left: 199px;
width:60px; height:60px;
overflow:hidden;
}
.tail:before{
content:'';
display:block;
width:141%; height:100%;
background:#000;
transform-origin:0 100%;
transform:rotate(-45deg);
}
<div class="kite"><span class="tail"></span>
</div>
使用 SVG
您应该考虑的另一种方法是使用 inline SVG .由于您似乎正在制作图形元素,因此 SVG 在语义上可能更合适,并且:
- 易于扩展
- 更短的代码
- 更好地控制形状和曲线
在下面的示例中,我使用 polyline elements制作红色正方形、底部黑色三 Angular 形和垂直线。对于圆形线,我使用带有 quadratic bezier curve command 的路径元素:
svg{display:block;width:400px;margin:0 auto;}
<svg viewbox="0 0 10 10">
<polyline fill="red" points="5 0 9 4 5 8 1 4" />
<polyline points="5 0 5.05 0.05 5.05 7.95 5 8 4.95 7.95 4.95 0.05" />
<path d="M1.05 4.05 Q5 1 8.95 4.05" fill="none" stroke-width="0.1" stroke="#000" />
<polyline points="5 8 6 9 4 9 " />
</svg>
奖金
感谢Harry让我进一步思考这个问题并让我找到另一种 CSS 只有一个 div 的方法:
.kite {
position: relative;
width: 200px; height: 200px;
background: #f00;
transform: rotate(45deg);
margin: 0px auto;
margin-top: 50px;
}
.kite:before, .kite:after {
content: '';
position: absolute;
}
.kite:before {
top: 50px; left: -41px;
width: 282px; height: 2px;
margin-top: -1px;
background: #000;
transform-origin: 141px 52px;
transform: rotate(45deg);
background-clip: content-box;
border-right: 50px solid #000;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
.kite:after {
top: 0; left: 0;
width: 198px; height: 198px;
border-top-left-radius: 100%;
border-left: 2px solid #000;
border-top: 2px solid #000;
}
<div class="kite"></div>
关于html - 如何仅使用 HTML 和 CSS 构建一个特殊的多边形(风筝形状)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36470489/