Question

我正在寻找切割div的底部和左下角。像这样http://prnt.sc/e93lif

在clip-path的帮助下尝试但是认为这不是一个好的解决方案。

#clip{
      width: 56px;
      height: 58.1px;
      border-radius: 8px;
      background-color: rgb(107, 170, 42);
      box-shadow: 0 2px 32px 0 rgba(0, 0, 0, 0.15), 0 1px 6px 0 rgba(0, 0, 0, 0.09);
    }

<div id="clip"></div>

Answer 1

可以使用伪元素使用倾斜来执行成角度的位。

#clip {
  position: relative;
  width: 56px;
  height: 40px;
}
#clip, #clip:before {
  background-color: #6baa2a;
  border-radius: 8px;
}
#clip:before {
  position: absolute;
  content: '';
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 32px;
  -webkit-transform: translateY(50%) skewY(8deg);
  transform: translateY(50%) skewY(8deg);
}

<div id="clip"></div>

同样您可以使用SVG：https://i.koya.io/GastelloIcon.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 269.5"><path d="M256 248c0 13.2-10.7 22.7-23.8 21L23.8 243C10.7 241.3 0 229.2 0 216V24C0 10.8 10.8 0 24 0h208c13.2 0 24 10.8 24 24V248z"/></svg>

Answer 2

你可以单独设置半径

div {
 width: 56px;
  height: 58.1px;
  border-radius: 8px 8px 8px 28px;
  background-color: rgb(107, 170, 42);
  box-shadow: 0 2px 32px 0 rgba(0, 0, 0, 0.15), 0 1px 6px 0 rgba(0, 0, 0, 0.09);
}

你会得到切角，不会像你的形象一样。

Answer 3

喜欢这个？ https://jsfiddle.net/b5t3x66y/1/

尝试一下：

div{
    width: 120px;
    height: 120px;
    border-right: 200px solid #6ba92c;
    border-bottom: 50px solid transparent;
    border-radius: 2px;
    background: transparent;
}

和

<div></div>

如何用缓坡切割角落？

3 个答案: