我怎样才能用CSS创建这样的盒子。

Question

我有这个图片

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但结果与上图不同。是否可以创建类似的类似？如果可能请告诉我如何。

注意：请忽略粉红色的背景。

Answer 1

请试一试。

＆＃13;

＆＃13;

Reply-To

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为使用position是最简单的方式。

＆＃13;

＆＃13;

.box {
  width: 200px;
  height: 100px;
  position: relative;
  background-color: #FFF;
  color: #000;
  border: solid 1px #000;
}

.box-content {
  background-color: #FFF;
  color: #000;
  position: absolute;
  bottom: 20px;
  right: -10px;
  max-width: 70%;
  padding: 5px;
}

.line {
  height: 1px;
  width: 30px;
  background-color: #000;
  position: absolute;
  right: 15px;
  bottom: 0;
}

＆＃13;

<div class="box">
  <div class="box-content">
    <div class="line"></div>
    content goes here
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;