製作兩個彩色的div響應

我正在打算在我的網站頂部的兩個彩色橫幅，問題是正確的部分沒有響應，我試圖給它％，rem，px和vw，但似乎沒有任何工作。這是我的代碼，你可以看到藍色部分的寬度太大，郵件無法保持固定。我如何可以使藍色部分佔據div的其餘製作兩個彩色的div響應

.banner { 
 
    margin-top: 0%; 
 
    height: 1px; 
 
    background-color: transparent; 
 
    border-bottom: 40px solid #c5027f; 
 
    border-right: 40px solid transparent; 
 
    width: 50%; 
 
    position:relative; 
 
} 
 

 
.banner:after{ 
 
    content:""; 
 
    position:absolute; 
 
    height: 1px; 
 
    top:0px; 
 
    background-color: transparent; 
 
    border-bottom: 40px solid #009ee2; 
 
    border-right: 40px solid #009ee2; 
 
    width: 134rem; 
 
    z-index:-1; 
 
    }

<div class="banner"> 
 
    <p style="color: white; float: left; font-size: .65em;margin-left: 10px;">54466565</p></i> 
 
    <p style="margin-left: 177%; margin-top: -5%; color: white; z-index: -1;">[email protected]</p> 
 
    
 
</div>

來源

2017-04-18 Carmen Amaro

我會簡單地使用漸變背景圖像（和CSS下降到本線）：

.banner { 
 
    display: table; 
 
    width: 100%; 
 
    color: white; 
 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c5027f+50,009ee2+50 */ 
 
    background: #c5027f; /* Old browsers */ 
 
    background: -moz-linear-gradient(45deg, #c5027f 50%, #009ee2 50%); /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(45deg, #c5027f 50%,#009ee2 50%); /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(45deg, #c5027f 50%,#009ee2 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c5027f', endColorstr='#009ee2',GradientType=1); /* IE6-9 fallback on horizontal gradient */ 
 
} 
 

 
.banner p { 
 
    padding: 16px; 
 
    display: table-cell; 
 
} 
 

 
.banner p.email { 
 
    text-align: right; 
 
}

<div class="banner"> 
 
    <p class="tel">54466565</p> 
 
    <p class="email">[email protected]</p> 
 
</div>

（感謝Colorzilla）

來源

2017-04-18 23:44:47

謝謝，它工作完美！ –

不客氣@CarmenAmaro –

我想用自己的方式做，是不是最好的。但是，例如解決方案要做到這一點是：

<div class="banner"> 
     <p style="color: white; float: left; font-size: .65em">54466565</p></i> 
     <p style="color: white; float: right; font-size: .65em;margin-right: -100%; ">[email protected]</p> 
    </div>

不過，我建議創建兩個div，內容的一半，並在中間添加第二顏色也許三角形。有很多更好的方法來實現這一點。您也可以旋轉第二個容器上隱藏的溢出並旋轉內容。

祝你好運！

來源

2017-04-18 23:43:37

-1

我建議顯示：內聯塊;

在兩個段落標籤上。另外我不知道你是否注意到，但你有一個隨機的結局，可能是渲染和搞亂你的風格。儘量避免花費不惜一切代價花花公子。

來源

2017-04-18 23:46:01 KeniSteward

製作兩個彩色的div響應

回答

相關問題