創建對角線邊框

Question

我需要創建一個對角線邊框。以下是圖片和here is a link to it。

我將如何做到這一點只用CSS和HTML？

我知道它可能在CSS中創建三角形，所以也許我創建了一個帶圓角的div，用於框的「黃色」部分。不知道如何做內部灰色部分。

我想避免使用多圖像解決方案，因爲它將在移動設備上，以便儘可能快地加載。

我正在研究一個解決方案，裏面有三個div，一個是三角形，我找到一個三角形制造商here，然後可能在黃色div上的相對位置，然後絕對定位內容？

Answer 1

有一種方法來實現這一目標的形狀，而無需另外使用額外的元素。我可以理解不願意使用多個圖像，但這種方法只能使用多個背景，並且不應該對頁面加載時間產生任何影響。

在此方法中，我們創建一個較小尺寸的背景，並將其放置在容器的right top以實現三角形效果。

此方法也可以與媒體查詢一起使用，沒有太多問題。

.shape { 
 
    height: 400px; 
 
    width: 50vw; 
 
    background: linear-gradient(225deg, #F3D56A 50%, transparent 50%), #EFEFEF; 
 
    background-size: 75px 75px; 
 
    background-repeat: no-repeat; 
 
    background-position: right top; 
 
    border-radius: 4px; 
 
    box-shadow: 4px 4px 4px rgba(0, 0, 0, .5); 
 
    border-top: 5px #F3D56A solid; 
 
} 
 
@media (max-width: 300px) { 
 
    .shape { 
 
    width: 150px; 
 
    background-size: 50px 50px; 
 
    } 
 
} 
 
@media (min-width: 301px) and (max-width: 600px) { 
 
    .shape { 
 
    width: 300px; 
 
    background-size: 50px 50px; 
 
    } 
 
}

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

Answer 2

爲什麼不只是創建一個圖像，並使用它作爲背景。您可以使圖像看起來完全像上面的灰色和黃色，然後將其添加到您的「盒子」中。

Answer 3

這裏是鏈接到一個js撥弄我已經嘲笑了 - 這工作得很好，雖然我沒有做整個風格https://jsfiddle.net/6pcrneat/

.container { 
    width:200px; 
    height:250px; 
    background:#ffffff; 
    border:1px solid #000; 
    position:relative; 
} 
.shape { 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    position: absolute; 
    right: -45px; 
    top: -10px; 
    border-style: solid; 
    width: 0px; 
    height: 0px; 
    line-height: 0px; 
    border-width: 0px 70px 70px 70px; 
    border-color: transparent transparent rgb(243, 213, 106) transparent; 
    moz-transition: .3s; 
    -ms-transition: .3s; 
    -o-transition: .3s; 
} 
.text { 
    margin-top: 100px; 
    text-align: center; 
} 

編輯：我會回來給你的三角形的圓角;我沒有注意到，最初

Answer 4

HTML：

<div id="content"> 
    <span></span> 
    <p class="title">Gold</p> 
    <p class="subtitle">Starting at</p> 
    <p class="price">$69.99/mo</p> 
    <a href="#" class="button">More Info</a> 
</div> 

CSS

#content { 
    font-family: Helvetica, Serif; 
    width: 440px; 
    height: 460px; 
    background: #EFEFEF; 
    text-align: center; 
    border-radius: 5px; 
    -webkit-box-shadow: 4px 6px 5px 1px rgba(0,0,0,0.41); 
    -moz-box-shadow: 4px 6px 5px 1px rgba(0,0,0,0.41); 
    box-shadow: 4px 6px 5px 1px rgba(0,0,0,0.41); 
    border-top:7px #F3D56A solid; 
} 
#content span { 
    border-style: solid; 
    border-width: 0 110px 110px 0; 
    border-color: transparent #f3d56a transparent transparent; 
    line-height: 0px; 
    _border-color: #000000 #f3d56a #000000 #000000; 
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); 
    float: right; 
} 
.title { 
    position: relative; 
    left: 50px; 
} 
.title, .price{ 
    color:#2C3E50; 
    font-size: 45px; 
    font-weight: 700; 
    text-align: center; 
} 
.subtitle { 
    color: #7A828B; 
    font-size: 30px; 
    font-weight: 300; 
} 
a.button { 
    text-decoration: none; 
    color:#FFF; 
    background: #F3D56A; 
    padding:20px 30px; 
    border-radius: 5px; 
} 

WORKING DEMO

更新：

媒體查詢分辨率320x480到：

@media only screen and (min-width: 320px) and (max-width: 480px) { 
    #content { 
     width: calc(100% - 5px); 
     height: 400px; 
    } 
    #content span { 
     border-width: 0 90px 90px 0; 
    } 
} 

結果：