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

Question

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

谢谢

Answer 1

请试试这个

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

是这样的吗？

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

您可以执行选择器 :before 并将 border-radius 添加到伪元素。

一种笨拙的方式可能对您没有任何好处，但我们开始吧：

<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 背景 :)

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

use css to create shape with this border

html

css

css-shapes