響應半鑽石邊框底部CSS

你如何在CSS的div底部實現這種事情？可能嗎？響應半鑽石邊框底部CSS

目前我使用的圖像解決方案，但我認爲這不是一個好辦法。

謝謝！

對於那些質疑，我做了研究，這是我試過的東西，它看起來很醜。

width: 100%; 
border-left: 800px solid transparent; 
border-right: 800px solid transparent; 
border-top: 84px solid #15C4CB;

它看起來是這樣的：

甚至沒有居中或響應。

來源

2015-12-16 Angelo Ab

預計你至少嘗試代碼這個你自己。堆棧溢出不是代碼寫入服務。我建議你做一些額外的研究，無論是通過谷歌或通過搜索，做一個嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您嘗試過的以及爲什麼它不起作用。 –

嘗試修改http://cssarrowplease.com/中的代碼作爲開始的地方。 –

[CSS三角形如何工作？]（http://stackoverflow.com/questions/7073484/how-do-css-triangles-work） –

ideea是使用vw單位而不是常規px; 50vw意味着一半的視口。這樣你就可以隨時縮放與你的視口相關的東西;

#someid{ 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 

 
    width: 100%; 
 
    height: 50px; 
 
    
 
    background: #15C4CB; 
 

 
    text-align: center; 
 
} 
 

 
#someid::before{ 
 
    content: ""; 
 
    
 
    display: block; 
 
    position: absolute; 
 
    top: 100%; 
 
    width: 100%; 
 
    
 
    border-left: 50vw solid transparent; 
 
    border-right: 50vw solid transparent; 
 
    border-top: 80px solid #15C4CB; 
 
    
 
    box-sizing: border-box; 
 
}

<div id="someid"> Bla bla bla </div>

來源

2015-12-16 19:02:59 iacobalin

非常感謝您的解決方案！現在完美運作。 –

歡迎您！ AngeloAb – iacobalin

你可以給一個嘗試僞，旋轉和箱陰影：

p { 
 
    /* or any other wrapper, here = demo purpose , so is width */ 
 
    width: 50%; 
 
    margin: 1em auto; 
 
    padding-bottom: 3%; 
 
    /* == 3% width */ 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
p:before, 
 
p:after { 
 
    content: ''; 
 
    position: absolute; 
 
    z-index: -1; 
 
    width: 100.2%; 
 
    height: 100%; 
 
    top: 100%; 
 
} 
 
p:before { 
 
    left: -50%; 
 
    transform-origin: top right; 
 
    transform: rotate(5deg); 
 
    box-shadow: -1000px -1000px 0 1000px #00C4CC; 
 
} 
 
p:after { 
 
    right: -50%; 
 
    box-shadow: 1000px -1000px 0 1000px #00C4CC;/* adapt here values to average max-height your containers could be (safe value) */ 
 
    transform-origin: top left; 
 
    transform: rotate(-5deg); 
 
}

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris 
 
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus 
 
    enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis 
 
    luctus, metus</p> 
 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris 
 
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus 
 
    enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis 
 
    luctus, metus</p>

來源

2015-12-16 19:19:58

響應半鑽石邊框底部CSS

回答

相關問題