用css放置两个圆形的梯形, [英] Put two rounded trapezes with css,
问题描述
我很难解决这个问题
我想用CSS做这个事情
I want to do with css this:
就像图片一样:两个带有圆角的梯形(很重要!),一个带有文本的梯形,另一个带有图片或图标的梯形,带有图标的梯形的尺寸可以更薄,但是两个梯形必须是大小相同.
Like the picture: two trapezes with a rounded corner (important!), one trapeze with text and the other with a picture, or icon, the size of the trapeze with the icon can be thinner, but both trapezes must be the same size.
我不知道是否应该使用svg作为背景或纯CSS.如果我使用svg,如何在带有圆角的梯形内插入文本和图标?
I don't know if should use svg as a background or pure css. If i use svg, how can i insert text and the icon inside the trapezes with a rounded corner?
预先感谢您的帮助.
推荐答案
这是另一个具有一个元素且代码更少的想法.只需依靠偏斜和两个伪元素即可:
Here is another idea with one element and less of code. Simply rely on skew and both pseudo element:
.box {
height: 100px;
position: relative;
z-index: 0;
overflow: hidden;
}
.box:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 60%;
background: blue;
border-top-right-radius: 30px;
transform: skewX(25deg);
transform-origin: bottom left;
}
.box:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 40%;
background: blue;
border-bottom-left-radius: 30px;
transform: skewX(25deg);
transform-origin: top right;
}
<div class="box">
</div>
这篇关于用css放置两个圆形的梯形,的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!