Положите две округлые трапеции с CSS, - PullRequest
Новая
       41

Положите две округлые трапеции с CSS,

0 голосов
/ 25 октября 2018

Мне трудно справиться с этой проблемой:

Я хочу сделать с css это:

a busy cat

Как на картинке: две трапеции с закругленнымугол (важно!), одна трапеция с текстом, а другая с рисунком или значком, размер трапеции со значком может быть меньше, но обе трапеции должны быть одинакового размера.

Не знаюНе знаю, следует ли использовать SVG в качестве фона или чистый CSS.Если я использую svg, как я могу вставить текст и значок внутри трапеции со скругленным углом?

Заранее благодарю за помощь.

Ответы [ 3 ]

0 голосов
/ 25 октября 2018

Вот еще одна идея с одним элементом и меньшим количеством кода.Просто положитесь на перекос и оба псевдоэлемента: 

.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>
0 голосов
/ 25 октября 2018

Вот подход с использованием 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>
0 голосов
/ 25 октября 2018

Это сложно, но возможно достичь в чистом CSS.

Вам нужно будет использовать псевдо :after и :before элементы, чтобы получить плоские края по бокам (используяграницы white на одной стороне), а затем используйте border-top-left-radius и 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>
...