Как я могу создать эту пользовательскую форму в CSS? - PullRequest
Новая
       59

Как я могу создать эту пользовательскую форму в CSS?

0 голосов
/ 17 мая 2018

Как я могу создать эту пользовательскую фигуру таким образом, чтобы она могла содержать текст с использованием CSS?

Custom shape

Я разработал ее в иллюстраторе, и когдаЯ экспортирую это как "svg", код svg выглядит так: 

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="258.3px" height="47.6px" viewBox="0 0 258.3 47.6" enable-background="new 0 0 258.3 47.6" xml:space="preserve">
</svg>

Но на странице это не работает.

Ответы [ 3 ]

0 голосов
/ 17 мая 2018

Вы также можете использовать один градиент: 

.notch {
  width: 258.3px;
  height: 47.6px;
  border-radius: 30px 0 0;
  background:linear-gradient(45deg,transparent 12px , #8DC73F 12px);
}
body {
  background:rgb(93, 93, 93)
}
<div class="notch"></div>
0 голосов
/ 17 мая 2018

Я бы порекомендовал решение linear-gradient, но здесь есть другой способ использования clip-path: 

.notch {
  width: 258.3px;
  height: 47.6px;
  border-radius: 30px 0 0;
  background: #8DC73F;
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 10% 100%, 0 64%);
}

body {
  background: rgb(93, 93, 93)
}
<div class="notch"></div>
0 голосов
/ 17 мая 2018

Один из подходов состоит в том, чтобы создать фигуру с одной изогнутой границей, а затем создать выемку с помощью псевдоэлемента. 

.shape {
  width: 200px;
  height: 50px;
  border-radius: 40px 0 0;
  background: #8DC73F;
  position: relative;
}

.shape:before {
  content: '';
  background: white;
  display: block;
  width: 30px;
  height: 30px;
  transform: rotate(45deg);
  position: absolute;
  bottom: -15px;
  left: -15px;
}
<div class="shape"></div>
...