如何在另一個div的右上角角創建三角形狀看起來被邊防

我要像這張圖片上創建形狀分爲：如何在另一個div的右上角角創建三角形狀看起來被邊防

shape

我創建三角形狀像上的這張照片，並將邊距設置爲右上角，但我不知道如何使它看起來像圖片上所示的左側div。

我是否必須「剪切」左邊的div以保持它的灰色邊框，並且看起來與綠色三角形分開？

是否有任何想法如何做到這一點？

編輯：

我使用頁面上固定的導航欄，所以當我滾動如果DIV是位置：絕對的，導航欄進入後面的div。
綠色三角形和DIV的其餘部分之間的空間應該是透明的，因爲我使用的圖像作爲頁面背景

來源

2013-08-30 Ian J

檢查http://css-tricks.com/snippets/css/css-triangle –

我知道了如何創建三角形，我創造了它，但我不知道怎麼做它看起來從左div分開（並保留div的灰色邊框） –

我建議，鑑於以下加價：

<div id="box"></div>

的CSS ：

#box { 
    width: 10em; 
    height: 6em; 
    border: 4px solid #ccc; 
    background-color: #fff; 
    position: relative; 
} 

#box::before, 
#box::after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    border-color: transparent; 
    border-style: solid; 
} 

#box::before { 
    border-width: 1.5em; 
    border-right-color: #ccc; 
    border-top-color: #ccc; 
} 

#box::after { 
    border-radius: 0.4em; 
    border-width: 1.35em; 
    border-right-color: #0c0; 
    border-top-color: #0c0; 
}

JS Fiddle demo。

來源

2013-08-30 11:42:52

就是這樣。謝謝:) –

你真的很受歡迎，謝謝*你*！ =） –

呃，看來它不工作，因爲它應該:(1.綠色三角形和白色框之間的邊界不能與頁面的主體背景（圖像）相同，所以它看起來不分離。我有固定的導航欄在頁面上，所以當我向下滾動導航欄後面這個div :( –

將兩個絕對定位的div放在一個相對位置的容器div中。然後使外三角形的三角形略大於內三角形。然後將這些元素放置在容器的右上角。

HTML

<div class="container"> 
    <div class="inner-triangle"></div> 
    <div class="outer-triangle"></div> 
</div>

CSS

.container{ 
    border: 2px solid gray; 
    position: relative; 
    height: 100px; 
} 

.inner-triangle{ 
    border-left: 20px solid transparent; 
    border-right: 20px solid green; 
    border-bottom: 20px solid transparent; 
    height: 0; 
    width: 0; 
    position: absolute; 
    right: 0px; 
    z-index: 2; 
} 

.outer-triangle{ 
    border-left: 22px solid transparent; 
    border-right: 22px solid gray; 
    border-bottom: 22px solid transparent; 
    height: 0; 
    width: 0; 
    position: absolute; 
    right: 0px; 
    z-index: 1; 
}

JS小提琴：http://jsfiddle.net/u8euZ/1

來源

2013-08-30 11:45:16

你可以結合上消減使用旋轉僞元素的overflow:hidden NT。

從這裏您可以使用position:absolute將僞指示位置置於右上角，您應該很樂意去！

div { 
 
    height: 250px; 
 
    width: 300px; 
 
    background: lightgray; 
 
    border-radius: 10px; 
 
    border: 5px solid dimgray; 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 30px auto; 
 
} 
 
div:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: -60px; 
 
    right: -60px; 
 
    height: 100px; 
 
    width: 100px; 
 
    background: green; 
 
    border: 5px solid dimgray; 
 
    transform: rotate(45deg); 
 
} 
 

 
/***********FOR DEMO ONLY*******************/ 
 

 

 
html, body { 
 
    margin:0; 
 
    padding:0;height:100%; 
 
    vertical-align:top;overflow:hidden; 
 
    background: rgb(79, 79, 79); 
 
    background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%); 
 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1))); 
 
    background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%); 
 
    background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%); 
 
    background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%); 
 
    background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1); 
 
}

<div></div>

來源

2015-05-21 08:58:23 jbutler483

如何在另一個div的右上角角創建三角形狀看起來被邊防

回答

相關問題