我正在尝试创建固定三角形导航的网页。
问题在于，我无法在大三角形中放入较小的三角形，如下图所示。
调整窗口大小时，三角形正在改变其角度，因此我无法将其设置为图像。
创建大三角形后，我被卡住了，这是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>并且它对任何屏幕尺寸都具有完全的响应能力。