带边框的CSS三角形[重复]

Question

我已经制作了一个像这样的 css 三角形：

width: 0; 
height: 0; 
border-top: 10px solid transparent;
border-bottom: 10px solid transparent; 
border-right:10px solid blue;

如何为三角形添加边框？

Answer 1

最简单的方法是堆叠2个元素（标签+标签或标签+标签：伪元素）宽度相对/绝对定位播放边框大小）作为链接中的xplained：CSS triangle custom border color

但如果你想要一个相当大的三角形，包含文本或图像、半透明或有背景，你可以使用 CSS3 变换和 2 个元素：demo http://codepen.io/gc-nomade/pen/gdoGA

CSS

.triangle {
  display:inline-block;
  margin: 0 1em;
  padding-top:5px;/* room for box-shadow eventually */
  width:10em;
  border-bottom:2px solid;/* bottom border of triangle */
  overflow:hidden;/* hide part of span */
  position:relative; /* trigger it to be reference for absolute childs */
  text-align:center;
  color:turquoise; /* it gives as well  border and shadow color if not define else where */
  text-shadow: 1px 1px 1px black, -1px -1px 1px white;
  box-shadow:0 4px 5px -5px black; /* we can give a reduced shadow */
}
/* now, set an height to triangle and center text */
.triangle p {
  margin:0;
  display:inline-block;/* inline-boxe can vertical-align aide another one */
  max-width:50%; /* try to keep it inside drawn triangle */
  padding-bottom:5%; /* get it not too close to bottom */
}
.triangle:before {
  content:'';
  display:inline-block;/* to set aside text */
  padding-top:50%; /* gives a triangle shape to div with height equal to minimum halh of width */
  vertical-align:bottom;/* make sure text is layed from bottom */
}
.triangle .notext {/* this will draw the 2 other edges of triangle */
  width:100%;
  background:linear-gradient(to bottom right,pink 5%,yellow 15% ,purple 30%);
  padding-top:100%;/* here we want a square or a container high enough */
  position:absolute; /* off the flow to disturb nothing */
  z-index:-1; /* don 'hide other content */
  border:2px solid; /* borders ! */
  left:0;
  transform:rotate(45deg); /* turn it a bit */
  transform-origin: 24.5% 59.5% ; /* control point of rotation */
  box-shadow:0 0 5px black; /* yes we can */
}
/* check if any size is fine */
.triangle + .triangle {
  width:15em;
}
.triangle + .triangle + .triangle {
  width:8em;
}
div#auto.triangle {width:auto;}
body {
  background:repeating-linear-gradient(to left, gray, purple,lime,violet,turquoise,orange,white 5em);
  text-align:center;
}

HTML 基础：

<div class="triangle"> 
  <p>SOME TEXTE</p> 
  <span class="notext"></span>
</div>

要调整三角形的形状或旋转，您可以更改 div 的 border-xx ，使用 padding-top（div / span 的）、transform-origin 和 transform:rotate(xxdeg) 以及最终的跨度宽度。