我如何使用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>

Answer 2

我觉得使用position是最简单的方法。

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

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