我怎样才能用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>