其中包含文字的css形狀

我需要在下面的圖像中創建此類形狀，其中包含文本。其中包含文字的css形狀

這是我嘗試：

HTML

 <div class="header-bottom"> 

      <div class="blue-rectangle"> 
       <p>sadasdasdasd</p> 
      </div> 

      <div class="blue-rectangle"> 
       <p>dsasdasdasda</p> 
      </div> 

     </div>

CSS

.header-bottom{ 
position: absolute; 
right:13%; 
bottom:5%; 
} 

.blue-rectangle { 
background-color: rgba(3,78,136,0.7); 
padding: 10px 20px 10px 200px; 
margin-bottom: 20px; 
} 

.blue-rectangle p{ 
color:white; 
text-transform: uppercase; 
font-size:18px; 
}

我嘗試添加變換：歪斜，但歪斜兩個右側，左側和文本本身。

來源

2015-07-28 umanga shrestha

[使用CSS抄近路]（可能重複的http：//計算器。 com/questions/7324722/cut-corners-using-css） –

.shape{ 
 
    text-align:center; 
 
    background-color:rgba(3,78,136,0.7); 
 
    width:200px; 
 
    height:60px; 
 
    line-height:60px; 
 
    color:white; 
 
    margin:20px auto; 
 
    position:relative; 
 
} 
 
.shape:before{ 
 
    content:""; 
 
    width:0px; 
 
    height:0px; 
 
    border-top:60px solid rgba(3,78,136,0.7); 
 
    border-left:60px solid transparent; 
 
    position:absolute; 
 
    right:100%; 
 
    top:0px; 
 
}

<div class="shape"> 
 
    something something 
 
</div> 
 
<div class="shape"> 
 
    something else 
 
</div>

來源

2015-07-28 07:27:16

它們甚至沒有相同的顏色... – musefan

thanx的通知 –

請嘗試以下代碼

.header-bottom { 
 
    position: absolute; 
 
    right: 13%; 
 
    bottom: 5%; 
 
} 
 
.blue-rectangle { 
 
    height: 60px; 
 
    background-color: rgba(3, 78, 136, 0.7); 
 
    padding: 10px 20px 10px 200px; 
 
    margin-bottom: 20px; 
 
    position: relative; 
 
} 
 
.blue-rectangle p { 
 
    color: white; 
 
    text-transform: uppercase; 
 
    font-size: 18px; 
 
    position: relative; 
 
} 
 
.blue-rectangle:before { 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 80px solid rgba(3, 78, 136, 0.7); 
 
    border-left: 80px solid transparent; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 100%; 
 
}

<div class="header-bottom"> 
 

 
    <div class="blue-rectangle"> 
 
    <p>sadasdasdasd</p> 
 
    </div> 
 

 
    <div class="blue-rectangle"> 
 
    <p>dsasdasdasda</p> 
 
    </div> 
 

 
</div>

來源

2015-07-28 07:26:51 w3debugger

我喜歡用:before僞類這樣的：

.blue-rectangle { 
 
    color:white; 
 
    text-transform: uppercase; 
 
    font-size:18px; 
 
    padding: 10px 20px 10px 200px; 
 
    background-color: rgba(3,78,136,0.7); 
 
    width: 200px; 
 
    position: relative; 
 
    margin-left: 50px; 
 
} 
 
.blue-rectangle:before { 
 
    content: ""; 
 
    position: absolute; 
 
    border: 21px solid transparent; 
 
    border-top-color: rgba(3,78,136,0.7); 
 
    border-right-color: rgba(3,78,136,0.7); 
 
    right: 100%; 
 
    top: 0; 
 
    width: 0; 
 
    height: 0 
 
}

<p class="blue-rectangle">sadasdasdasd</p>

來源

2015-07-28 07:27:39 LinkinTED

（減1），因爲OP詢問小寫字母 – musefan

我複製了他的CSS代碼...它具有大寫變換。他的問題中沒有什麼要求小寫..... – LinkinTED

在你的情況，你不能使用歪斜。相反，你應該在左邊添加一個旋轉的三角形。

試加：

.blue-rectangle:before { 
    content: ""; 
    border-left: 78px solid transparent; 
    border-top: 78px solid rgba(3,78,136, 0.7); 
    position: absolute; 
    top: 0; 
    left: -78px; 
    opacity: 0.7; 
}

你可以做調整自己的休息。

來源

2015-07-28 07:37:55

爲相關信息：

背景漸變和背景大小可以太使用:)

.shape{ 
 
    text-align:center; 
 
    background: 
 
    linear-gradient(65deg , transparent 50%,rgba(3,78,136,0.7) 50%) left no-repeat, 
 
    linear-gradient(0deg , rgba(3,78,136,0.7),rgba(3,78,136,0.7)) 30px 0 no-repeat; 
 
    
 
    background-size:30px 100%, 100% 100%; 
 
    width:200px; 
 
    height:60px; 
 
    line-height:60px; 
 
    padding:0 20px; 
 
    color:white; 
 
    margin:20px auto; 
 
    position:relative; 
 
} 
 
body { 
 
    background:url(http://lorempixel.com/640/480); 
 
    background-size:cover; 
 
    }

<div class="shape"> 
 
    sometext 
 
</div> 
 
<div class="shape"> 
 
    something else 
 
</div><div class="shape"> 
 
    some more text 
 
</div> 
 
<div class="shape"> 
 
    and so on n on 
 
</div>

來源

2016-04-26 12:14:12

其中包含文字的css形狀

回答

相關問題