元素周围的部分圆形边框

Question

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

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

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

Answer 1

是的，CSS3 是可能的。但是，由于并非所有浏览器都支持 border-radius，因此您需要添加浏览器前缀。该生成器将帮助您： http://border-radius.com/

Answer 2

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

左下角的border-radius产生弯曲的底部，插图box-shadow产生彩色区域。通过调整父容器上的 border-radius，底部（内部和外部）的曲率可以 increased/decreased。

.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 3

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

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

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

元素周围的部分圆形边框

Partial round border around an element

html

css

border

css-shapes