【问题标题】:Put two rounded trapezes with css,用css放两个圆形梯形,
【发布时间】:2019-03-02 22:11:47
【问题描述】:

我很难解决这个问题:

我想用 css 做这个:

喜欢图片:两个带圆角的梯形(重要!),一个带文字的梯形,另一个带图片或图标的梯形,带图标的梯形尺寸可以细一些,但两个梯形都必须是大小相同。

我不知道应该使用 svg 作为背景还是纯 css。如果我使用 svg,如何在带圆角的梯形内插入文本和图标?

提前感谢您的帮助。

【问题讨论】:

  • 如果有可以解决您问题的答案,请不要忘记接受答案,谢谢。

标签: css svg css-shapes


【解决方案1】:

这是另一种想法,一个元素,更少的代码。只需依靠 skew 和这两个伪元素:

.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>

【讨论】:

  • 为我服务,谢谢,我将使用此代码
  • @NiñoBoy2001 欢迎您,然后别忘了接受答案 ;)
【解决方案2】:

这很复杂,但可以在纯 CSS 中实现。

您需要使用伪:after:before 元素来获得侧面的平坦边缘(在一侧使用white 边框),然后使用@ 987654324@ 和 border-bottom-right-radius 在主要元素上以获得曲率。排列这些值可能很复杂,但取决于您想要多少“边缘”,您可以使用这些值。

这是一个例子:

.left,
.right {
  width: 40%;
  height: 100px;
  background: blue;
  float: left;
  position: relative;
}

.left {
  border-top-right-radius: 90px;
}

.left:after {
  content: '';
  position: absolute;
  right: -21.5px;
  bottom: 0;
  border-top: 50px solid white;
  border-left: 31px solid blue;
  width: 0;
}

.right {
  margin-left: 5%;
  border-bottom-left-radius: 90px;
}

.right:before {
  content: '';
  position: absolute;
  left: -21.5px;
  top: 0;
  border-bottom: 50px solid white;
  border-right: 31px solid blue;
  width: 0;
}
<div class="left"></div>
<div class="right"></div>

【讨论】:

    【解决方案3】:

    这是一种使用 SVG 的方法。

    .banner {
      position: relative;
      width: 570px;
      height: 96px;
      background-color: #4f81bc;
    }
    
    .banner svg {
      position: absolute;
      left: 50%;
      overflow: visible;
    }
    <div class="banner">
      <svg width="96" height="100%" viewBox="0 0 96 96">
        <path d="M -22,0 L 37,85 Q 48,96 59,96 L 22,96 L -37,11 Q -48,0 -59,0 Z"
              fill="#fff"/>
      </svg>
    </div>

    还有一个版本,其中添加了两个带有示例文本内容的单元格。

    .banner {
      position: relative;
      width: 570px;
      height: 96px;
      background-color: #4f81bc;
    }
    
    .banner svg {
      position: absolute;
      left: 50%;
      overflow: visible;
    }
    
    .container {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
    }
    
    .container div {
      width: 50%;
      color: white;
      font: sans-serif;
      padding: 2em 0 0 2em;
    }
    
    .container div:nth-child(2) {
      text-align: right;
      padding: 2em 2em 0 0;
    }
      
    <div class="banner">
      <svg width="96" height="100%" viewBox="0 0 96 96">
        <path d="M -22,0 L 37,85 Q 48,96 59,96 L 22,96 L -37,11 Q -48,0 -59,0 Z"
              fill="#fff"/>
      </svg>
      <div class="container">
        <div>Text on the left</div>
        <div>Something else on the right</div>
      </div>
    </div>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-09-02
      • 1970-01-01
      • 2016-02-03
      • 2021-05-09
      • 2015-03-19
      • 2012-10-03
      • 2020-11-04
      相关资源
      最近更新 更多