如何在CSS中创建此自定义形状？

Question

如何使用CSS以可包含文本的方式创建此自定义形状？

我是在illustrator中设计的，当我将其导出为“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>

但是它没有在页面中工作。

Answer 1

您也可以使用单个渐变：

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

Answer 2

一种方法是创建一个具有单个弯曲边框的形状，然后使用伪元素创建凹口。

＆＃13;

＆＃13;

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

＆＃13;

<div class="shape"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我会推荐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>