在CSS中创建此形状（半管形状）

Question

我一直试图在CSS中制作这种形状，但不幸的是找不到方法。它是半管形的：

像素化的角应该是光滑的（是放大的图像）。

有人知道如何创建它吗？还是可以让我走上正确的路？

Answer 1

您将需要对内部块使用伪元素:after，然后对弯角应用border-radius。

div {
  height: 60px;
  width: 60px;
  border: solid red;
  position: relative;
  background: red;
  border-width: 0 10px 10px 0;
  box-sizing: border-box;
}

div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom-right-radius: 10px;
  background: #fff;
}

<div></div>

Answer 2

简单

.shape {
  width: 140px;
  height: 200px;
  background-color: gray;
}

.shape:after {
  content: '';
  position: absolute;
  width: 100px;
  height: 160px;
  background-color: #fff;
  border-bottom-right-radius: 50px;
}

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

Answer 3

您可以使用一个元素并以这样的透明度来做到这一点：

.box {
  width:80px;
  height:100px;
  border-right:20px solid grey;
  border-bottom:20px solid grey;
  box-sizing:border-box;
  background:
   radial-gradient(circle at top left,transparent 69%,grey 72%) bottom right/20px 20px no-repeat;
}

body {
  background:pink;
}

<div class="box">
</div>

Answer 4

我认为这里的问题是在任意背景上创建“外部”曲线。通过the trick可以通过从伪元素的粗圆角边缘剪切所需的部分来实现：

div {
  width: 50%;
  min-height: 4em;
  margin: auto;
  border: #888 solid;
  border-width: 0 1em 1em 0;
  position: relative;
}

div::after {
  content: '';
  border: #888 solid;
  border-width: 0 1em 1em 0;
  border-radius: 0 0 100% 0;
  position: absolute;
  right: -1em;
  bottom: -1em;
  width: 1em;
  height: 1em;
  clip: rect(0 1em 1em 0);
}

div:hover::after {
  border-color: red; /* highlight the curved part */
}

body {
  /* just as a background example */
  background: repeating-linear-gradient(-45deg, #ddd, #ddd 1px, transparent 1px, transparent 10px);
  min-height: 90vh;
}

<div></div>