我怎樣才能讓這樣的使用CSS和DIV

-3

https://www.cp24.com/polopoly_fs/7.687199!/httpImage/image.jpg_gen/derivatives/default/image.jpg 我怎樣才能讓這樣的使用CSS和DIV

我要完成類似附有影像的東西的形狀，我試了幾個崗位，但沒有完成它，請幫助我。

感謝

2017-08-09 user1554459

以供將來參考，並避免你的問題是向下投票或關閉，請參閱[如何創建最小，完整和可驗證示例]（https://stackoverflow.com/help/mcve）。我們不是在這裏爲您編寫代碼，我們在這裏幫助您調試現有的代碼。 – jmoon

您可以利用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>

來源

2017-08-09 21:41:30 BenM

非常感謝，你是天才！ – user1554459

@ user1554459沒問題！ – BenM

我怎樣才能讓這樣的使用CSS和DIV

回答

相關問題