如何从圆形切角？答案

【问题标题】：How to cut corner from rounded shape?如何从圆形切角？
【发布时间】：2018-10-27 10:26:57
【问题描述】：

如何使用 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>

但它在页面中不起作用。

【问题讨论】：

标签： css svg css-shapes

【解决方案1】：

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

&lt;div class="notch"&gt;&lt;/div&gt;

【讨论】：

【解决方案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)
}

&lt;div class="notch"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

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

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

&lt;div class="shape"&gt;&lt;/div&gt;

【讨论】：