在 Div 的两个顶角创建一个三角形，除以边框 [英] Create a triangle on both top corners of Div, divided by borders

问题描述

按照这个问题和答案，我能够在我的 div 的右上角得到一个三角形:

解决方案

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

.element {宽度:300px；高度:100px；背景:线性渐变(到左下角，红色 50%，透明 50%)100% 0/50px 50px，线性渐变(到右下角，绿色 50%，透明 50%)0 0/50px 50px，线性渐变(到右下角，棕色 50%，透明 50%)0 0/60px 60px，线性渐变(到左下角，粉红色 50%，透明 50%)100% 0/60px 60px，橘子;背景重复:不重复；文字对齐:居中；颜色:#fff;字体大小:40px；}

一个

I was able to get a single triangle in the top right corner of my div by following this question and answer: Top Right triangle in Div.

My question is how do I get another triangle in the top left as well? When I add code for the second triangle, my div comes out all messed up.

Here's what I tried.

/*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>

This is how the endDiv should look like

解决方案

What about an easy way with less of code and linear-gradient:

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

这篇关于在 Div 的两个顶角创建一个三角形，除以边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！