Html 如何在另一个 div 的右上角创建三角形以按边框划分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18531959/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create triangle shape in the top-right angle of another div to look divided by border
提问by Ian J
I want to create shape like on this picture:
我想在这张图片上创建形状：
I created triangle shape like on this pic, and set the margins to be in top right angle, but I don't know how to make it look divided from the left div like shown on picture.
我在这张图片上创建了三角形，并将边距设置为右上角，但我不知道如何使它看起来像图片上显示的那样与左侧 div 分开。
Do I have to "cut" left div to remain its grey border and to look divided from green triangle?
我是否必须“剪切”左 div 以保持其灰色边框并看起来与绿色三角形分开？
Is there any idea how to do this?
有什么想法如何做到这一点吗？
EDIT:
编辑：
- I am using fixed navigation bar on page, so when I scroll if div is
position:absolute, navigation bar goes behind div. - Space between green triangle and rest of div should be transparent, because I am using image as page background.
- 我在页面上使用固定导航栏，所以当我滚动 div 时
position:absolute，导航栏在 div 后面。 - 绿色三角形和 div 其余部分之间的空间应该是透明的，因为我使用图像作为页面背景。
回答by David says reinstate Monica
I'd suggest, given the following mark-up:
鉴于以下标记，我建议：
#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;
}<div id="box"></div>回答by Kevin Bowersox
Place two absolutely positioned divs within a container div with position relative. Then make the triangles with the outer triangle being slightly larger than the inner triangle. Then position these elements in the upper right hand corner of the container.
将两个绝对定位的 div 放置在具有相对位置的容器 div 中。然后制作外三角形略大于内三角形的三角形。然后将这些元素放置在容器的右上角。
HTML
HTML
<div class="container">
<div class="inner-triangle"></div>
<div class="outer-triangle"></div>
</div>
CSS
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 Fiddle:http://jsfiddle.net/u8euZ/1
JS小提琴：http : //jsfiddle.net/u8euZ/1
回答by jbutler483
You could use a rotate pseudo element in conjunction to an overflow:hiddenon the parent.
您可以将旋转伪元素与overflow:hidden父元素上的an 结合使用。
From here you could position the pseudo to the top right using position:absoluteand you should be good to go!
从这里您可以使用将伪定位到右上角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>