用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屋！