編碼自定義的HTML框

我想編寫一個HTML框，就像我在圖片中添加了一個框，並在右上角切了一個藍色框。編碼自定義的HTML框

box

我想知道如果我能做到這一點，或者如果這被視爲一個圖像。請讓我知道。

2012-09-28 vikky114

重複http://stackoverflow.com/questions/12634366/css-arrow-with-bottom-border –

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Hello</title> 
     <style> 
     body{ 
       margin: 20px; 
     } 

     .box:after { 
       content: ""; 
       position: absolute; 
       top: 0px; 
       right: 0px; 
       border-width: 20px 20px 0 0; 
       border-style: solid; 
       border-color: #fff transparent; 
       display: block; 
       width: 0; 
     } 

     .box { 
       color: #fff; 
       background-color: #bbd0ed; 
       position: relative; 
       height: 80px; 
       width: 150px; 
       padding: 10px; 
     } 
     </style> 
    </head> 
    <body> 
     <p class="box"> 
       Hello! 
     </p> 
    </body> 
</html>

GL HF

來源

2012-09-28 06:43:10

非常感謝Greger。這對我來說很有魅力。 – vikky114

這可以用CSS來實現：

.box-corner { 
    /* You would prefer a png for the transparent background where the corner is */ 
    background-image: url('box-background.jpg'); 
    padding: 10px 10px 0 0; /* Assuming the corner is 10x10 */ 
}

然後實例是這樣的：

<div class="box-corner">Content</div>

來源

2012-09-28 06:16:16

採取一些高度和寬度與一些背景顏色的DIV。然後添加一個帶有背景的子div，因爲圖像中有裁剪。將子div的位置設置爲相對，並將頂部和右側設置爲0. Like below

#childDiv{ 
     position : relative; 
     background-image : url("cropedMark.png)" 
     width : "Some width"; 
     height : "Some height"; 
     top : 0; 
     right : 0 
    }

希望這有所幫助。

來源

2012-09-28 06:17:16 Exception

您好。非常感謝。這也適用。但是我正在尋找一個我不想擁有圖像的地方。請向下滾動以獲取工作解決方案。 – vikky114

這裏是一個確切的答案。 http://jsfiddle.net/swGvr/

<style> 
#target { 
border-top: 30px solid transparent; 
border-left: 30px solid #4c4c4c; 
border-right: 30px solid #4c4c4c; 
border-bottom: 30px solid #4c4c4c; 
width:200px; 
height:100px; 
} 
#target > div { 
background-color:#4c4c4c; 
width:230px; 
height:130px; 
margin-top:-30px; 
margin-left:-30px; 
position:absolute; 
} 
</style> 
<div id="target"><div></div></div>

有兩個CSS共享的寬度和高度。您也可以使用jQuery自動生成另一個。

來源

2012-09-28 06:32:48 Minime

編碼自定義的HTML框

回答

相關問題