带有文字的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形状

回答

相关问题