どうすればこのようなボックスを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>