html - 我如何使用 CSS 创建这样的框。

Question

我有这张图

我想用 html 和 css 创建它。所以我试试这个

    <div style="width:200px;height:100px;-webkit-border-radius: 0px 0px 99px 0px;-moz-border-radius: 0px 0px 99px 0px;border-radius: 0px 0px 99px 0px;background-color:#E3A20B;"></div>

但是结果和上图不一样。是否可以创建类似的东西？如果可能，请告诉我怎么做。

注意:请忽略粉色背景

Answer 1

请试试这个。

.box{
  background:#F9D7E8;
  padding:15px;
  width:200px;
  height:100px;
   position:relative;
}
.box-inner{
  border:1px solid #000;
  height:100%; 
}
.box p {
  font-family: arial;
  font-size: 12px;
  font-weight: bold;
  line-height: 140%;
  margin: auto;
  position: absolute;
  right: 3px;
  text-align: right;
  text-transform: uppercase;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 113px;
  background: #f9d7e8;
}
.box p::before {
  background: #000;
  bottom: -2px;
  content: "";
  height: 1px;
  left: auto;
  position: absolute;
  right: 18px;  
  width: 35px;
  z-index: -1;
}

<div class="box">
  <div class="box-inner">
    <p>lorem ipsum dolar sit amet</p>
  </div>
</div>