CSS: zu erklären, wie zu zeichnen css Dreieck

Question

Ich lese über diese shape of CSS. Hier ist der Code des Zeichnungsdreiecks:

#triangle-up { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 100px solid red; 
} 

Ich weiß nicht die Logik dahinter. Und ich weiß nicht, wie man diesem Dreieck einen Rahmen hinzufügt.

Answer 1

Ja, es ist schwierig. CSS-Dreiecke werden unter Verwendung einer Kombination eines farbigen & transparenten Rands eines Elements erzielt.

Kredit für diese Demo geht an Chris Coyier

(function(){var demo,run;demo=$("#whole-thing");run=function(){setTimeout(function(){return demo.addClass("step-1");},2500);setTimeout(function(){return demo.addClass("step-2");},5000);setTimeout(function(){return demo.addClass("step-3");},5500);setTimeout(function(){return demo.addClass("step-4");},6000);setTimeout(function(){return demo.addClass("step-5");},7500);setTimeout(function(){return demo.addClass("step-6");},10000);setTimeout(function(){return demo.addClass("step-7");},12000);setTimeout(function(){return demo.addClass("step-8");},14000);setTimeout(function(){return demo.addClass("step-9");},14500);setTimeout(function(){return demo.addClass("step-10");},15000);return setTimeout(function(){return demo.addClass("step-11");},18000);};run();$("#re-run").on('click',function(){$("#whole-thing").removeClass();return run();});}).call(this);

@import url(http://fonts.googleapis.com/css?family=Andika);.triangle-demo { width: 100px; height: 100px; margin: 0 auto; background: tan; border-top: 0 solid #EE7C31; border-left: 0 solid #F5D97B; border-bottom: 0 solid #D94948; border-right: 0 solid #8DB434; transition: 0.8s 0.2s;}.step-1 .triangle-demo { border-top-width: 10px;}.step-2 .triangle-demo { border-left-width: 10px;}.step-3 .triangle-demo { border-right-width: 10px;}.step-4 .triangle-demo { border-bottom-width: 10px;}.step-6 .triangle-demo { background: transparent;}.step-7 .triangle-demo { width: 0; height: 0;}.step-8 .triangle-demo { border-left-color: transparent;}.step-9 .triangle-demo { border-right-color: transparent;}.step-10 .triangle-demo { border-top-color: transparent;}.triangle-title { width: 300px; padding: 1rem; color: white; background: #D94948; border-radius: 20px; margin: auto; opacity: 0; transition: 0.8s 0.2s;}.step-11 .triangle-title { opacity: 1;}body { background: #333; font-family: 'Andika', sans-serif; color: white; text-align: center; font-size: large; transform: translateZ(0);}.steps { position: relative; height: 45px;}.steps > div { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; background: #333; transition: 0.3s;}.steps .step-0 { opacity: 1;}.step-1 .steps .step-1 { opacity: 1;}.step-2 .steps .step-2 { opacity: 1;}.step-5 .steps .step-5 { opacity: 1;}.step-6 .steps .step-6 { opacity: 1;}.step-7 .steps .step-7 { opacity: 1;}.step-8 .steps .step-8 { opacity: 1;}.step-11 .steps .step-11 { opacity: 1;}h1 { text-transform: uppercase; letter-spacing: 1px; font-size: 1.5rem; border-bottom: 1px solid #555; color: #999;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><h1>How a CSS Triangle is Made</h1><div id="whole-thing"> <div class="steps"> <div class="step-0">Imagine a box.</div> <div class="step-1">The box has a border-top.</div> <div class="step-2">It also has the other borders.</div> <div class="step-5">Notice how the borders meet each other at angles.</div> <div class="step-6">The background of the box is transparent.</div> <div class="step-7">The box is actually zero width and zero height.</div> <div class="step-8">Three of the borders are actually transparent in color.</div> <div class="step-11">That's how a CSS triangle is made!</div> </div> <div class="triangle-demo"></div> <div class="triangle-title"> <button id="re-run">Run Again</button></div></div>

Answer 2

Sie keine Grenze zu einem CSS-Dreieck den Weg hinzufügen, können Sie denken, sind, weil ein CSS-Dreieck ein seltsam gezeichnet Grenze . Wenn Sie eine Grenze haben möchten, ist es am besten, ein größeres Dreieck hinter Ihrem kleineren Dreieck zu haben. So etwas wie folgt aus: https://jsfiddle.net/9cL8g6pu/2/

#wrapper{ 
    position: relative; 
    width: 105px; 
    height: 105px; 
} 
#tri-up { 
    position: absolute; 
    top: 3px; left: -50px; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 100px solid red; 
} 
#t-up-bg{ 
    position: absolute; 
    top: 0; left: 0; 
    width: 0; 
    height: 0; 
    border-left: 53px solid transparent; 
    border-right: 53px solid transparent; 
    border-bottom: 105px solid blue;  
}