三角形CSS中的三角形

Darius F 发表于 Dev

大流士

我正在尝试创建固定三角形导航的网页。

问题是我无法将大三角形内的较小三角形拟合，如下图所示。

调整窗口大小时，三角形正在改变其角度，因此我无法将其设置为图像。

创建大三角形后，我被卡住了，这是css和html：

.triangle {
	position:fixed;
	top:0;
	left:0;
    width: 100vw;
    height: 100vh;
    padding-bottom: 10%;
    overflow: hidden;
	z-index:5;
}
.triangle:after {
	content: "";
    display: block;
    width: 0;
    height: 0;
    border-right: 300px solid transparent;
    border-bottom: 100vh solid grey;
}

<div class="triangle"></div>

我如何实现这种设计？

大流士

感谢Qwertiy！

我忘记了我可以使用svg完成所有这些操作。

结果：

#triangle{
	height:100vh;
	position:fixed;
	top:0;
	left:0;
}
#triangle svg{
	height:100%;
}

	<div id="triangle">
	<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="image-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 8296 10958"
 xmlns:xlink="http://www.w3.org/1999/xlink"  preserveAspectRatio="xMinYMid  meet">
 <defs>
  <style type="text/css">
   <![CDATA[
    .fil0 {fill:#3C3A3B}
    .fil1 {fill:#2BB67E}
    .fil7 {fill:#252525}
    .fil2 {fill:#1B9567}
    .fil8 {fill:#1B9567}
    .fil4 {fill:#236B4D}
    .fil3 {fill:#147852}
    .fil9 {fill:#147852}
    .fil5 {fill:#0F6948}
    .fil6 {fill:#0F6948}
   ]]>
  </style>
   <mask id="id0">
  <linearGradient id="id1" gradientUnits="userSpaceOnUse" x1="1546.09" y1="2400.5" x2="2245.49" y2="3327.41">
   <stop offset="0" style="stop-opacity:1; stop-color:white"/>
   <stop offset="0.658824" style="stop-opacity:0.501961; stop-color:white"/>
   <stop offset="1" style="stop-opacity:0; stop-color:white"/>
  </linearGradient>
    <rect style="fill:url(#id1)" x="1371" y="2533" width="1050" height="662"/>
   </mask>
   <mask id="id2">
  <linearGradient id="id3" gradientUnits="userSpaceOnUse" x1="824.138" y1="2789.31" x2="546.587" y2="3652.24">
   <stop offset="0" style="stop-opacity:1; stop-color:white"/>
   <stop offset="0.678431" style="stop-opacity:0.501961; stop-color:white"/>
   <stop offset="1" style="stop-opacity:0; stop-color:white"/>
  </linearGradient>
    <rect style="fill:url(#id3)" y="2761" width="1371" height="920"/>
   </mask>
   <mask id="id4">
  <linearGradient id="id5" gradientUnits="userSpaceOnUse" x1="1208.94" y1="3086.85" x2="1275.56" y2="3573.33">
   <stop offset="0" style="stop-opacity:1; stop-color:white"/>
   <stop offset="0.788235" style="stop-opacity:0.501961; stop-color:white"/>
   <stop offset="1" style="stop-opacity:0; stop-color:white"/>
  </linearGradient>
    <rect style="fill:url(#id5)" y="2848" width="2485" height="964"/>
   </mask>
   <mask id="id6">
  <linearGradient id="id7" gradientUnits="userSpaceOnUse" x1="7048.03" y1="9572.37" x2="6622.58" y2="8467.99">
   <stop offset="0" style="stop-opacity:1; stop-color:white"/>
   <stop offset="0.788235" style="stop-opacity:0.501961; stop-color:white"/>
   <stop offset="1" style="stop-opacity:0; stop-color:white"/>
  </linearGradient>
    <rect style="fill:url(#id7)" x="6256" y="8252" width="1158" height="1536"/>
   </mask>
   <mask id="id8">
  <linearGradient id="id9" gradientUnits="userSpaceOnUse" x1="5660.97" y1="9414.52" x2="5171.17" y2="9015.96">
   <stop offset="0" style="stop-opacity:1; stop-color:white"/>
   <stop offset="0.6" style="stop-opacity:0.501961; stop-color:white"/>
   <stop offset="1" style="stop-opacity:0; stop-color:white"/>
  </linearGradient>
    <rect style="fill:url(#id9)" x="4503" y="8252" width="1825" height="1926"/>
   </mask>
   <mask id="id10">
  <linearGradient id="id11" gradientUnits="userSpaceOnUse" x1="2214.44" y1="10409" x2="1277.21" y2="10775.8">
   <stop offset="0" style="stop-opacity:1; stop-color:white"/>
   <stop offset="0.788235" style="stop-opacity:0.501961; stop-color:white"/>
   <stop offset="1" style="stop-opacity:0; stop-color:white"/>
  </linearGradient>
    <rect style="fill:url(#id11)" x="1070" y="10226" width="1351" height="732"/>
   </mask>
   <mask id="id12">
  <linearGradient id="id13" gradientUnits="userSpaceOnUse" x1="3426.59" y1="10530.6" x2="3446.52" y2="10158.6">
   <stop offset="0" style="stop-opacity:1; stop-color:white"/>
   <stop offset="0.6" style="stop-opacity:0.501961; stop-color:white"/>
   <stop offset="1" style="stop-opacity:0; stop-color:white"/>
  </linearGradient>
    <rect style="fill:url(#id13)" x="2369" y="10101" width="2134" height="488"/>
   </mask>
 </defs>
 <g id="Layer_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <polygon class="fil0" points="8296,10958 6994,9231 0,0 0,10958 3325,10958 4148,10958 "/>
  <polygon class="fil1" points="997,1316 0,0 490,1618 "/>
  <polygon class="fil2" points="492,1618 1919,2533 997,1316 "/>
  <polygon class="fil3" points="0,2761 490,1618 0,1893 "/>
  <polygon class="fil4" points="0,2761 490,1618 1919,2533 "/>
  <polygon class="fil5" points="0,1899 0,0 490,1618 "/>
  <polygon class="fil1" points="1371,2848 1919,2533 0,2761 "/>
  <polygon class="fil1" style="mask:url(#id0)" points="1371,2848 1919,2533 2421,3195 "/>
  <polygon class="fil6" style="mask:url(#id2)" points="0,3680 0,2761 1371,2848 "/>
  <polygon class="fil1" points="5759,10366 7414,10568 7414,9788 "/>
  <polygon class="fil7" style="mask:url(#id4)" points="1482,3580 2484,3279 2421,3195 1371,2848 0,3680 0,3812 "/>
  <polygon class="fil4" points="6329,9607 5759,10366 7414,9788 "/>
  <polygon class="fil8" style="mask:url(#id6)" points="6329,9607 7414,9788 6257,8252 "/>
  <polygon class="fil8" points="8296,10958 7414,10568 7414,9788 "/>
  <polygon class="fil4" points="8296,10958 7414,10568 6415,10958 "/>
  <polygon class="fil9" points="5759,10366 7414,10568 6415,10958 "/>
  <polygon class="fil1" points="5759,10366 6415,10958 4504,10178 "/>
  <polygon class="fil8" points="3945,10588 6415,10958 4504,10178 "/>
  <polygon class="fil9" points="5759,10366 6329,9607 4504,10178 "/>
  <polygon class="fil7" style="mask:url(#id8)" points="6257,8252 6258,8286 6329,9607 4504,10178 5842,9236 "/>
  <polygon class="fil4" points="3945,10588 6415,10958 3945,10958 "/>
  <polygon class="fil1" points="2370,10226 3945,10588 2421,10958 "/>
  <polygon class="fil8" style="mask:url(#id10)" points="2370,10226 1070,10958 2421,10958 "/>
  <polygon class="fil7" style="mask:url(#id12)" points="4504,10178 3945,10588 2370,10226 3835,10101 "/>
  <polygon class="fil8" points="3945,10588 2421,10958 3945,10958 "/>
 </g>
</svg>
</div>