创建一个三角形格带有边框

我在我的网站创建一个三角形格带有边框

#corner { 
 
    position: absolute; 
 
    z-index: 999; 
 
    left: 0; 
 
    top: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 50px solid #000; 
 
    border-bottom: 50px solid transparent; 
 
    border-right: 50px solid transparent; 
 
    border-left: 50px solid #000; 
 
}

<div id="corner"></div>

编辑的左上角的三角形 - 我希望它有一个5px的红色边框（仅在倾斜侧），使三角形和边框不同的颜色

理想情况下，将有超过顶一个PNG图片为好，但我可以把另一个DIV过顶如果需要的话

这是整个页面角落三角形

来源

2016-07-23 user3550879

我所做的三角形黑色使其可见，然后我想我也有反转边框的颜色。但是如果边框和三角形具有相同的颜色，我不会看到这一点。只要把它做得更大。 – Oriol

请进一步解释或显示您的期望输出。你的问题没有多大意义。 – 4castle

我很抱歉，对问题的编辑改变了我的要求。我将澄清 – user3550879

我认为最好的方式来实现你想要的是使用transform财产而不是操纵border甚至可能需要两个元素和大量不必要的代码。

看看这个fiddle或以下片段的视觉表示。

段：

#corner { 
 
    /* Dimensions */ 
 
    height: 200px; 
 
    width: 200px; 
 
    
 
    /* Positioning */ 
 
    position: absolute; 
 
    left: -7.5em; 
 
    top: -7.5em; 
 
    z-index: 999; 
 
    transform: rotateZ(-45deg); 
 
    
 
    /* Styling */ 
 
    background-color: red; 
 
    border-bottom: 5px solid #0c0c0c; 
 
}

<div id="corner"></div>

来源

2016-07-23 04:18:02

创建两个div：

#corner { 
 
    position: absolute; 
 
    z-index: 999; 
 
    left: 0; 
 
    top: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 55px solid #f00; 
 
    border-bottom: 55px solid transparent; 
 
    border-right: 55px solid transparent; 
 
    border-left: 55px solid #f00; 
 
} 
 

 
#corner-inner { 
 
    position: absolute; 
 
    z-index: 999; 
 
    left: -55px; 
 
    top: -55px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 50px solid #000; 
 
    border-bottom: 50px solid transparent; 
 
    border-right: 50px solid transparent; 
 
    border-left: 50px solid #000; 
 
}

<div id="corner"> 
 
    <div id="corner-inner"></div> 
 
</div>

来源

2016-07-23 03:19:32

以下我认为这是最好的回应，我只需要把一个标志，以及我不想堆叠到很多div – user3550879

是的，到目前为止...我认为这是简单的，因为它正在磨合。我无法工作如何以任何其他方式做到这一点。 – 2016-07-23 03:37:12

你甚至可以尝试伪元素:before和:after。

#corner { 
 
    position: absolute; 
 
    z-index: 1; 
 
    left: 0; 
 
    top: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 50px solid #000; 
 
    border-bottom: 50px solid transparent; 
 
    border-right: 50px solid transparent; 
 
    border-left: 50px solid #000; 
 
} 
 
#corner:before{ 
 
    content:""; 
 
    position:absolute; 
 
    border-top: 5px solid red; 
 
    border-left: 5px solid red; 
 
    top:-50px; 
 
    left:-50px; 
 
    width:92px; 
 
    height:92px; 
 
} 
 
#corner:after{ 
 
    content:""; 
 
    position:absolute; 
 
    border-right: 5px solid red; 
 
    top:-104px; 
 
    left:-83px; 
 
    width:93px; 
 
    height:140px; 
 
    transform:rotate(45deg); 
 
}

<div id="corner"></div>

来源

2016-07-23 04:20:33 frnt

user3550879只想在边界**上边界**。 – 2016-07-30 10:13:57

@ IShad0wk我认为它需要覆盖它的所有角落边界：红色; – frnt

*“编辑 - 我希望它有一个5像素的红色边框（只在有角度的一面），所以三角形和边框是不同的颜色”* - user3550879。 – 2016-07-30 23:56:49

创建一个三角形格带有边框

回答

相关问题