如何將此對象從.PSD轉換爲HTML/CSS？

Question

我應該從純CSS做這個對象，如果它可能或我們它作爲一個div的背景圖像？

它不在主要內容區域，所以我不知道如何實現它。我想我應該使用div的絕對定位？

Answer 1

CSS只解決方案使用border：

.block { 
 
    background-color: #f3f3f3; 
 
    color: #909090; 
 
    font-family: Arial, sans-serif; 
 
    margin: 0 auto; 
 
    padding: 20px 20px 10px; 
 
    width: 300px; 
 
} 
 
.block h2 { 
 
    background-color: #a9c4c6; 
 
    color: white; 
 
    font-family: Roboto Slab, serif; 
 
    font-weight: normal; 
 
    position: relative; 
 
    left: -29px; 
 
    margin: 0; 
 
    position: relative; 
 
    text-indent: 29px; 
 
    text-transform: uppercase; 
 
} 
 
.block h2:before { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: -8px; 
 
    left: 0; 
 
    border-width: 4px 5px; 
 
    border-color: #84a0a2; 
 
    border-style: solid; 
 
    border-top-color: transparent; 
 
    border-left-color: transparent; 
 
    width: 0; 
 
    height: 0; 
 
}

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet"> 
 
<section class="block"> 
 
    <h2>Furniture</h2> 
 
    <p>Should I make this object from pure CSS if it is possible or us it as a background image for a div?</p> 
 

 
    <p>It goes outside of main content area so I am not sure how to implement it. I guess I should use absolute positioning for the div?</p> 
 
</section>

Answer 2

我們有一個CSS邊界工作，我們得到相同的....

欲瞭解更多，你必須閱讀像這樣的文章你如何使用CSS形狀https://css-tricks.com/examples/ShapesOfCSS/。

.main{ 
 
padding:20px; 
 
} 
 
.test { 
 
    font-size: 15px; 
 
    background: #ccc; 
 
    padding:10px 
 
    
 
    
 
} 
 
h2 
 
{ 
 
\t position: relative; 
 
\t width: 50%; 
 
\t font-size: 1.5em; 
 
\t font-weight: bold; 
 
\t padding: 6px 20px 6px 70px; 
 
\t color: #555; 
 
\t background-color: #AECACC; 
 
\t text-shadow: 0px 1px 2px #bbb; 
 
\t -webkit-box-shadow: 0px 2px 4px #888; 
 
\t -moz-box-shadow: 0px 2px 4px #888; 
 
\t box-shadow: 0px 2px 4px #888; 
 
    left:-20px; 
 
} 
 

 
h2:after 
 
{ 
 
\t content: ' '; 
 
\t position: absolute; 
 
    /*EDIT border WIDTH as you want fold tringle with css */ 
 
\t border-bottom: 10px solid #8BA8AA; 
 
    border-left: 10px solid transparent; 
 
    height: 0; 
 
    width: 0; 
 
    left: 0px; 
 
    /*EDIT TOP as border width */ 
 
\t top: -10px; 
 
    
 
}

<div class="main"> 
 
<div class="test"> 
 
<h2>HEADING HERE</h2> 
 
</div> 
 

 
</div>