如何从圆形形状切角？

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

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

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

Answer 2

你也可以使用单一渐变:

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

如何从圆形形状切角？

How to cut corner from rounded shape?

css

svg

css-shapes