帶有文字的CSS形狀

-3

我需要幫助。到目前爲止，我能夠創建左邊的div，但是我被第二個div，右邊的div所困住。請提供任何提示？帶有文字的CSS形狀

This is the HTML 

<div class="shape"> 
    ALEGETI MEDIEREA 
    </div>

，這是CSS

 .shape{ 
    text-align:center; 
    background-color:#8ed7c2; 
    width:50%; 
    height:178px; 
    line-height:178px; 
    color:#fef5ca; 
    float:left; 
    position:relative; 
    font-size:50px; 
    top:20px; 


} 
.shape:after{ 
    content:""; 
    width:0px; 
    height:178px; 
    border-top:178px solid rgba(3,78,136,0.7); 
    border-right:60px solid transparent; 
    position:absolute; 
    left:100%; 


}

來源

2017-06-01 MihaI

@mihal如果你分享一些HTML我們可以是有益的， CSS也是如此，只是看着它的圖像難以確定並修復它。 –

發佈您的代碼與問題。說明你到底想要做什麼以及你做了什麼。 –

@mihal不知道您是否共享了正確的圖像（css形狀），它在背景中有圖像，而您的css沒有參考。 –

This is the HTML 

<div class="shape"> 
    ALEGETI MEDIEREA 
    </div>

，這是CSS

 .shape{ 
    text-align:center; 
    background-color:#8ed7c2; 
    width:50%; 
    height:178px; 
    line-height:178px; 
    color:#fef5ca; 
    float:left; 
    position:relative; 
    font-size:50px; 
    top:20px; 


} 
.shape:after{ 
    content:""; 
    width:0px; 
    height:178px; 
    border-top:178px solid rgba(3,78,136,0.7); 
    border-right:60px solid transparent; 
    position:absolute; 
    left:100%; 


}

來源

2017-06-01 19:15:43 MihaI

帶有文字的CSS形狀

回答

相關問題