元素周围的部分圆形边框

Question

我试图在没有图像的情况下实现这个（黄色）：

我找到的最详细的边界生成器是this generator available in MDN。

虽然它不起作用。 还有其他方法吗？

Answer 1

是的，这可以通过左下角的插入box-shadow和border-radius的组合来实现。

左下角的border-radius产生弯曲的底边，而插入box-shadow产生彩色区域。通过调整父容器上的border-radius，可以增加/减少底侧（内侧和外侧）的曲率。

.bordered {
  position: relative;
  width: 300px;
  height: 75px;
  padding-left: 25px;
  background: transparent;
  border-bottom-left-radius: 40px;
  box-shadow: inset 100px -15px 0px darkorange;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
}
.bottom-right {
  position: absolute;
  right: 10px;
  bottom: 2px;
  color: black;
  font-size: 11px;
}
/* just for demo */

body {
  background: black;
}

<div class="bordered"><span>Schematic</span>
  <span class="bottom-right">1234567890</span>
</div>

Answer 2

@ Harry的解决方案的一个小选择是使用伪元素：

＆＃13;

＆＃13;

.orange {
  position: relative;
  height: 150px;
  width: 500px;
  background: darkorange;
  border-radius: 0 0 0 100px;
}
.orange:before {
  content: "";
  height: 80%;
  width: 80%;
  position: absolute;
  background: black;
  top: 0;
  right: 0;
  border-radius: 0 0 0 100px;
}
.bot {
  position: absolute;
  height: 20%;
  right: 0;
  bottom: 0;
}

/*Demo purposes only*/
html,body{background:black;}

＆＃13;

<div class="orange">Hello, world!
  <div class="bot">MORE!!</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

是的，CSS3可以实现。但是，由于并非所有浏览器都支持border-radius，因此您需要添加浏览器前缀。这台发电机将帮助您： http://border-radius.com/