在 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

代码更少和线性渐变的简单方法怎么样：

.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;
}

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

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

你想要这样的东西吗？

.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;
}

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

Answer 4

同样的效果略少 CSS

HTML：

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

CSS：

    .topRightTriangle {
    width: 10em;
    height: 6em;
    position: relative;
    background: orange;
    overflow:hidden;
}
.topRightTriangle:after, .topRightTriangle:before {
    content: '\25b2';
    font-size:20px;
    position: absolute;
    top: -12px;
    border-color: transparent;
    border-style: solid;
    z-index:1;
}
.topRightTriangle:before {
    color:red;
    left: -4.5px;
    transform: rotate(97deg) skewX(33deg) skewY(-8deg) scale(1.2) translate(-1px,0px)
}
.topRightTriangle:after {
    color:black;
    right: -3.5px;
    transform: rotate(-97deg) skewX(-33deg) skewY(8deg) scale(1.2) translate(1px,0px)
}
.triangle-bg:before, .triangle-bg:after {
    content: '';
    position: absolute;
    top: 0;
    border: transparent solid;
}
.triangle-bg:before {
    border-width: 0.6em;
    border-left-color: #ccc;
    border-top-color: #ccc;
    left:0;
}
.triangle-bg:after {
    right:0;
    border-width: 0.6em;
    border-right-color: #ccc;
    border-top-color: #ccc;
}