如何在另一个div的右上角创建三角形以看起来被边框分割

Question

我想在这张图片上创建形状：

我在这张图片上创建了三角形，并将边距设置为右上角，但我不知道如何使它看起来像图片上所示的那样与左侧 div 分开。

我是否必须“剪切”左 div 以保持其灰色边框并看起来与绿色三角形分开？

有没有办法做到这一点？

编辑：

1. 我在页面上使用了固定的导航栏，所以当我滚动 div 为position:absolute 时，导航栏在 div 后面。
2. 绿色三角形和 div 其余部分之间的空间应该是透明的，因为我使用图像作为页面背景。

Answer 1

鉴于以下标记，我建议：

#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>

Answer 2

将两个绝对定位的 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

Answer 3

您可以将旋转伪元素与父级上的 overflow:hidden 结合使用。

从这里您可以使用 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>

Answer 4

我认为最简单的答案是制作一个正方形并以一定角度将其推出页面。边框方法的问题是您无法添加渐变背景。哪个好看！

<div class="corner"/>

.corner {
  bottom: -100px;
  left: -100px;
  position: absolute;
  height: 200px;
  width: 200px;
  transform: rotate(45deg);
  background: linear-gradient(90deg, hsla(0, 0%, 0%, 1) 0%, hsla(284, 75%, 54%, 1) 100%); // can do special background this way
body {overflow: hidden;}