htmlとcssのみを使用して斜めの要素を作成する

Question

htmlとcssのみを使用して背景色でオファーdivを作成するにはどうすればよいですか？私が求めている何

は幅で、募集のdivの高さは、絵と同じでなければなりません。 これはhtmlとCSSを使用して作成しました。 divの幅と高さが大きいため、divの一部が私のソリューションに隠されています。

私が書いたコード：

.offer-text-wrapper { 
 
    display: inline-block; 
 
    position: absolute; 
 
    top: -39px; 
 
    left: -36px; 
 
    color: #FFF; 
 
    height: 72px; 
 
    width: 75px; 
 
    background: #f44336; 
 
    transform: rotate(-43deg); 
 
} 
 

 
.offer-text { 
 
    -moz-transform: rotate(-40deg); 
 
    -o-transform: rotate(-40deg); 
 
    display: inline-block; 
 
    margin-left: 21px; 
 
    line-height: 124px; 
 
}

<div class="offer-text-wrapper"> 
 
    <span class="offer-text"> Offer </span> 
 
</div>

編集：

幅とオファーテキストラッパーの高さが大きくなっているので、私が追加したとき、私は問題の下に抱えていますそれをブートストラップグリッドに割り当てます。

Answer 1

は、あなたがそれに満足しているまで、それは基本的には寸法や位置を変えています、コードスニペットを見てください。

この意味は？

.offer-container { /* added container to show effect better */ 
 
    width: 200px; 
 
    height: 100px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    border: 1px solid #ccc; 
 
    border-radius: 12px; 
 
    margin: 40px; 
 
} 
 

 
.offer-text-wrapper { 
 
    display: inline-block; 
 
    position: absolute; 
 
    top: -29px; 
 
    left: -40px; 
 
    color: #FFF; 
 
    height: 72px; 
 
    width: 95px; 
 
    background: #f44336; 
 
    transform: rotate(-45deg); 
 
    text-align: center; 
 
} 
 

 
.offer-text { 
 
    display: inline-block; 
 
    line-height: 114px; 
 
}

<div class="offer-container"> 
 
    <div class="offer-text-wrapper"> 
 
    <span class="offer-text">Offer</span> 
 
    </div> 
 
</div>