在Div的两个顶角创建一个三角形，除以边框

Question

通过以下问题和回答，我能够在我的div的右上角找到一个三角形： Top Right triangle in Div

我的问题是如何在左上方另外获得三角形？当我为第二个三角形添加代码时，我的div全部搞砸了。

这是我尝试过的。

/*TopRight (if you comment out all .TopRightTriangle you will get the TopLeft working correctly)*/

.topRightTriangle {
  width: 10em;
  height: 6em;
  position: relative;
}

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

.topRightTriangle::before {
  border-width: 0.6em;
  border-right-color: #ccc;
  border-top-color: #ccc;
}

.topRightTriangle::after {
  border-width: 0.5em;
  border-right-color: #000;
  border-top-color: #000;
}


/*TopLeft (if you comment out all .TopLeftTriangle you will get the TopRight working correctly)*/

.TopLeftTriangle {
  width: 10em;
  height: 6em;
  position: relative;
}

.TopLeftTriangle::before,
.TopLeftTriangle::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-color: transparent;
  border-style: solid;
}

.TopLeftTriangle::before {
  border-width: 0.6em;
  border-left-color: #ccc;
  border-top-color: #ccc;
}

.TopLeftTriangle::after {
  border-width: 0.5em;
  border-left-color: red;
  border-top-color: red;
}

<div class="topRightTriangle topLeftTriangle"></div>

这就是endDiv的样子

Answer 1

使用较少代码和线性渐变的简单方法：

＆＃13;

＆＃13;

.element {
  width:300px;
  height:100px;
  background:
   linear-gradient(to bottom left,  red 50%,transparent 50%) 100% 0/50px 50px,
   linear-gradient(to bottom right, green 50%,transparent 50%) 0 0/50px 50px,
   
   linear-gradient(to bottom right, brown 50%,transparent 50%) 0 0/60px 60px,
   linear-gradient(to bottom left,  pink 50%,transparent 50%) 100% 0/60px 60px,
  orange;
  background-repeat:no-repeat;
  text-align:center;
  color:#fff;
  font-size:40px;
}

＆＃13;

<div class="element"> A </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我相信多个前后元素是不可能的，所以认为你需要做一个额外的元素覆盖。有点像这样，但也许它不适用于你的情况？希望它有所帮助，对不起，如果它不适合你。

/*TopRight*/

.topRightTriangle {
  width: 10em;
  height: 6em;
  position: relative;
}

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

.topRightTriangle::before,
.topRightTriangle::before {
  border-width: 0.6em;
  border-right-color: #ccc;
  border-top-color: #ccc;
}

.topRightTriangle::after,
.topRightTriangle::after {
  border-width: 0.5em;
  border-right-color: #000;
  border-top-color: #000;
}


/*TopLeft*/

.TopLeftTriangle {
  width: 10em;
  height: 6em;
  position: relative;
}

.TopLeftTriangle::before,
.TopLeftTriangle::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-color: transparent;
  border-style: solid;
}

.TopLeftTriangle::before {
  border-width: 0.6em;
  border-left-color: #ccc;
  border-top-color: #ccc;
}

.TopLeftTriangle::after {
  border-width: 0.5em;
  border-left-color: red;
  border-top-color: red;
}

<div class="topRightTriangle TopLeftTriangle"></div>

/*TopRight*/

.topRightTriangle {
  width: 10em;
  height: 6em;
  position: relative;
}

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

.topRightTriangle::before,
.topRightTriangle::before {
  border-width: 0.6em;
  border-right-color: #ccc;
  border-top-color: #ccc;
}

.topRightTriangle::after,
.topRightTriangle::after {
  border-width: 0.5em;
  border-right-color: #000;
  border-top-color: #000;
}


/*TopLeft*/

.TopLeftTriangle {
  width: 10em;
  height: 6em;
  position: relative;
}

.TopLeftTriangle::before,
.TopLeftTriangle::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-color: transparent;
  border-style: solid;
}

.TopLeftTriangle::before {
  border-width: 0.6em;
  border-left-color: #ccc;
  border-top-color: #ccc;
}

.TopLeftTriangle::after {
  border-width: 0.5em;
  border-left-color: red;
  border-top-color: red;
}

<div class="topRightTriangle"><span class="TopLeftTriangle"></span></div>

Answer 3

你想要这样的东西吗？

＆＃13;

＆＃13;

.myDiv {
    position: relative;
    width: 100px;
    height: 100px;
    background: red;
}

.myDiv:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: 10px solid gray;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid gray;
}

.myDiv:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: 10px solid gray;
    border-right: 10px solid gray;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
}

＆＃13;

<div class="myDiv"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

相同的效果略少于CSS

HTML：

Invalid Date

CSS：

<div class="topRightTriangle"><div class="triangle-bg"></div></div>