Установить тень на треугольник с не ортофоном

Question

Как вы можете видеть в примере, и если вы знакомы с техникой теневого треугольника, это относится только к орто треугольникам.

Кто-нибудь знаком с затенением равнобедренного или любого треугольника вообще?

Это не должно быть таким же подходом, даже если svg является приемлемым. Без растра.

Цените свою помощь.

.ortho{ 
 
    top: 400px; 
 
    left:-300px; 
 
    transform: rotate(135deg) 
 
} 
 

 
.isosceles{ 
 
    top: 40px; 
 
    left:40px; 
 
} 
 

 

 
.triangle{ 
 
    position: relative; 
 
} 
 

 
.triangle:after{ 
 
    
 
    width: 0; 
 
    height: 0; 
 
    
 
    position: absolute; 
 
    content: "\0020"; 
 
    border: 40px solid; 
 
    transform-origin: 0 0; 
 
    box-sizing: border-box; 
 
    box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.3); 
 
    border-color: transparent transparent #bada55 #bada55; 
 
    
 
} 
 

 

 
.isosceles:after{ 
 
    
 
\t width: 0; 
 
\t height: 0; 
 
\t border-style: solid; 
 
\t border-width: 0 40px 68px 40px; 
 
\t border-color: transparent transparent #dadada transparent; 
 
}

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

Answer 1

вы можете использовать второй псевдо и размойте:

/* added */ 
 

 
.triangle:before { 
 
    content: ''; 
 
    -webkit-filter: blur(2px); 
 
    filter: blur(2px); 
 
    width: 0; 
 
    height: 0; 
 
    left: -2px; 
 
    top: -4px; 
 
    position: absolute; 
 
    content: "\0020"; 
 
    border: 43px solid; 
 
    transform-origin: 0 0; 
 
    box-sizing: border-box; 
 
    border-color: transparent transparent #000 #000; 
 
} 
 
.isosceles:before { 
 
    content: ''; 
 
    position: absolute; 
 
    -webkit-filter: blur(2px); 
 
    filter: blur(2px); 
 
    left: -1px; 
 
    top: -1px; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 0 41px 70px 41px; 
 
    border-color: transparent transparent #000 transparent; 
 
} 
 
/* end added */ 
 

 
.ortho { 
 
    top: 400px; 
 
    left: -300px; 
 
    transform: rotate(135deg) 
 
} 
 
.isosceles { 
 
    top: 40px; 
 
    left: 40px; 
 
} 
 
.triangle { 
 
    position: relative; 
 
} 
 
.triangle:after { 
 
    width: 0; 
 
    height: 0; 
 
    position: absolute; 
 
    content: "\0020"; 
 
    border: 40px solid; 
 
    transform-origin: 0 0; 
 
    box-sizing: border-box; 
 
    border-color: transparent transparent #bada55 #bada55; 
 
} 
 
.isosceles:after { 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 0 40px 68px 40px; 
 
    border-color: transparent transparent #dadada transparent; 
 
}

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

Answer 2

я сделал что-то подобное с использованием html5

window.onload = function() { 
 
    var canvas = document.getElementById("myCanvas"); 
 
    var c = canvas.getContext("2d"); 
 
    var width = 300; // Triangle Width 
 
    var ht = 360; // Triangle ht 
 
    var pd = 95; 
 
    c.beginPath(); 
 
    c.moveTo(pd + width/2, pd); 
 
    c.lineTo(pd + width, ht + pd); 
 
    c.lineTo(pd, ht + pd); 
 
    c.closePath(); 
 
    c.shadowBlur = 100; 
 
    c.shadowColor = "lime"; 
 
    c.fillStyle = "#444488"; 
 
    c.fill(); 
 
    c.beginPath(); 
 
    c.moveTo(pd + width/2, ht + pd); 
 
    c.lineTo(pd + width, pd); 
 
    c.lineTo(pd, pd); 
 
    c.closePath(); 
 
    c.shadowBlur = 100; 
 
    c.shadowColor = "yellow"; 
 
    c.fillStyle = "#222244"; 
 
    c.fill(); 
 
};

#myCanvas { 
 
    border: 22px solid fuchsia; 
 
}

<canvas align-="center" border="yellow" id="myCanvas" width="500" height="500">Browser not suitable for HTML5.</canvas>

См: isoceles triangle with glow