はどのように私は私が添付された画像に似た何かを達成したい、この使用してCSSとdivの

Question

https://www.cp24.com/polopoly_fs/7.687199!/httpImage/image.jpg_gen/derivatives/default/image.jpg

のような形状を作ることができ、私はいくつかのポストを試みたが、それは行われませんでした、私を助けてください。

おかげ

Answer 1

あなたは、たとえば、同様の項目を達成するためにCSS :after擬似要素を利用することができ

：今後の参考のために

#banner { 
 
    font-family: sans-serif; 
 
    text-transform: uppercase; 
 
} 
 

 
#banner > div { 
 
    display: inline-block; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    padding: 0 20px; 
 
} 
 

 
#banner .banner-grey { 
 
    background: #aaa; 
 
    position: relative; 
 
} 
 

 
#banner .banner-grey:after { 
 
    border: 20px solid transparent; 
 
    border-left-color: #aaa; 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    right: -40px; 
 
    top: 0; 
 
} 
 

 
#banner .banner-red { 
 
    background: red; 
 
    font-weight: bold; 
 
    margin-left: -4px; 
 
    padding-left: 60px; 
 
} 
 

 
#banner .banner-red span { 
 
    color: #fff; 
 
    font-style: italic; 
 
}

<div id="banner"> 
 
    <div class="banner-grey">Check out our <b>live and interactive screen</b></div> 
 
    <div class="banner-red"><span>CP24</span>now</div> 
 
</div>