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