使用css创建具有此边框的形状

Question

我想使用css或任何其他可能的选项创建此形状。可能吗？这样的形状是否有任何内部负边界？

由于

Answer 1

这样的事情？

.shape{
  display:inline-block;
  position:relative;
  background-color:black;
  width:60px;
  height:60px;
  padding-top:20px;
  overflow:hidden;
}
.shape:before{
  position:absolute;
  top:-20px;
  left:0;
  width:100%;
  height:40px; 
  border-radius:50%;
  content:"";
  background-color:white;
}

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

Answer 2

请试试这个

.flag {
  width: 110px;
  height: 56px;
  padding-top: 25px;
  position: relative;
  background: red;
  color: white;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}
.flag:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 13px solid #eee;
  border-left: 55px solid transparent;
  border-right: 55px solid transparent;
}

Demo

Demo1

Answer 3

你可以做选择器：之前并将border-radius添加到伪元素。

一个hacky方式，可能不会对你有任何好处，但我们走了：

<style>


.test {background: #000;
            width:100px; 
            height:100px;
            color:#fff;
            padding:40px;

        }
    .test:before {
        position: absolute;
        left:0;
        top:-10px;
        width:200px;
        height:40px;
        border-radius: 50%;
        content:'';
        background-color: #fff;
    }
</style>




<div class="test">

        this is a rtest content
    </div>

或者您可以使用svg背景：）