通过css创建自定义形状边框

【问题标题】：Creating custom shape border via css通过css创建自定义形状边框
【发布时间】：2018-06-26 06:58:51
【问题描述】：

如何通过 css 创建这个形状？

Example

【问题讨论】：

SO 不是编码服务...做一个小搜索并尝试做它，然后在遇到问题时返回
那是我知道不是的，我试着寻找它但找不到正确的方向从哪里开始，我从边界开始但没有成功
所以从你开始的地方添加，这样我们就知道你做了努力，或者我们认为有 0 努力，你只是在寻找一个现成的代码
好吧，我只从border-top-left-radius开始：；但这不能进入 - 所以我真的不知道在哪里继续或搜索适合我的示例的内容

标签： css bootstrap-4

【解决方案1】：

这是一个通过 CSS 实现的纸张折叠效果示例。

这里的关键是使用:before定位在div上方的盒子阴影

HTML

<div class="note">

</div>

CSS

.note {
  position: relative;
  width: 30%;
  padding: 1em 1.5em;
  margin: 2em auto;
  color: #fff;
  background: #97C02F;
  overflow: hidden;
}

.note:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: #fff #fff #658E15 #658E15;
  background: #658E15;
  box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

Codepen 示例https://codepen.io/Washable/pen/BJqMJd

【讨论】：

谢谢，我不知道如何准确搜索，但我找到了一个类似的例子，这个更好，谢谢！