创建了一个具有 3 种不同颜色边框的 CSS 三角形，但是可以用更少/更简单的 CSS 代码来完成吗？

Question

所以我成功地创建了一个 CSS 具有 3 种不同颜色边框的三角形。可以在这里看到：https://codepen.io/nuul/pen/oNbeZey

CSS代码：

$bg: #0000e5

$color: ((#00007c, #0000e5), (#0000b0, #0000e5), (#0000ff, #0000e5))

@mixin linear-gradient($direction, $gradients...) 
  background-image: linear-gradient($direction, $gradients...)

@function colorL($some-color, $num)
  @return nth($some-color, $num)
 
@for $i from 1 through length($color)
  .sq-#{$i}
    @include linear-gradient(colorL(nth($color, $i), 2) 60%, colorL(nth($color, $i), 1) 75%)
    
$height: 9px
$width: $height * 3.47

body
  background: #3D4849
 
.blueCore
  position: absolute
  left: 5px
  top: 15px

.sq-wrapper
  width: $width
  height: $height
  font-size: 0
  display: inline-block
  clip-path: polygon(50% 0%, 0 100%, 100% 100%)
  position: absolute
  left: 0
  top: $height
  transform-origin: 50% 0
 
.sq-1-wrapper
  transform: rotate(0deg)

.sq-2-wrapper
  transform: rotate(240deg)
 
.sq-3-wrapper
  transform: rotate(-240deg)
  
.sq
  width: 100%
  height: 100%

.blueBlock
  background-color: #0000e5
  border: 3px solid
  border-top-color: #0000ff
  border-right-color: #00007c
  border-bottom-color: #00007c
  border-left-color: #0000ff
  width: 42px
  height: 42px
  position: relative
  z-index: 10

虽然我对结果很满意，但我仍然想知道是否可以简化此 CSS 代码（因为仅仅一个三角形就需要很多 CSS 代码）。 Perhaps 带有 :before :after?外观应该保持不变

有什么想法吗？

ps：你可以忽略它周围的方块，我只是想把它放在一个div中以备将来使用

谢谢！

Answer 1

就您的问题而言，我不建议为此使用 CSS，也许在这种情况下，图片甚至超赞字体会更有效率。但是，您可以调整如下所示的内容。它使用两个元素来创建此形状。

.outer {
  position: relative;
  height: 200px;
  width: 200px;
  background: dimgray;
}

.outer:before {
  /*Bottom Border Here*/
  content: "";
  position: absolute;
  height: 10%;
  width: 90%;
  left: 5%;
  top: 88%;
  z-index: 10;
  background: darkblue;
  transform: perspective(100px) rotateX(60deg);
}

.outer:after {
  /*Triangle Background*/
  content: "";
  position: absolute;
  width: 0;
  left: 10px;
  bottom: 10px;
  border-top: 0;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
  border-bottom: 150px solid blue;
}

.inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.inner:before {
  content: "";
  position: absolute;
  height: 10%;
  width: 90%;
  left: -17%;
  top: 50%;
  background: lightblue;
  /*Left border colour here*/
  transform: rotate(121deg) perspective(100px) rotateX(60deg);
}

.inner:after {
  content: "";
  position: absolute;
  height: 10%;
  width: 90%;
  right: -18%;
  top: 50%;
  background: rgb(0, 0, 220);
  /*right border colour here*/
  transform: rotate(-120deg) perspective(100px) rotateX(60deg);
}


/*demo only*/

.outer:hover:before {  background: darkred;}
.outer:hover:after {  border-bottom-color: red;}
.outer:hover .inner:before {  background: tomato;}
.outer:hover .inner:after {  background: rgb(220, 0, 0);}

<div class="outer">
  <div class="inner"></div>
</div>

Answer 2

一个元素和响应式解决方案：

.box {
  width: 200px;
  display: inline-flex;
  background: 
    conic-gradient(at 50% 20px, red 150deg, #0000 0 210deg, green 0) 
    blue;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.box::before {
  content: "";
  padding-top: calc(86.6% - 10px);
  width: 100%;
  box-sizing: border-box;
  border:solid transparent;
  border-bottom-color: gold;
  border-width: 0 18px 10px 18px;
}

<div class="box"></div>

<div class="box" style="width:150px;"></div>

<div class="box" style="width:50px;"></div>

创建了一个具有 3 种不同颜色边框的 CSS 三角形，但是可以用更少/更简单的 CSS 代码来完成吗？

Created a CSS Triangle with 3 different coloured borders, but can it be done with less/ more simple CSS code?

html

css

sass

css-shapes