Vraag Hoe werken CSS-driehoeken?


Er zijn veel verschillende CSS-vormen voorbij CSS-trucs - CSS-vormen en ik ben vooral verbaasd over een driehoek:

CSS Triangle

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
<div id="triangle-up"></div>

Hoe en waarom werkt het?


1633
2017-08-16 03:54


oorsprong


antwoorden:


CSS-driehoeken: een tragedie in vijf akten

Als zei Alex, grenzen van gelijke breedte komen tegen elkaar aan in hoeken van 45 graden:

borders meet at 45 degree angles, content in middle

Als je geen bovenrand hebt, ziet het er als volgt uit:

no top border

Dan geef je het een breedte van 0 ...

no width

... en een hoogte van 0 ...

no height either

... en ten slotte maak je de twee zijranden transparant:

transparent side borders

Dat resulteert in een driehoek.


2054
2017-08-16 04:11



De randen gebruiken een gehoekte rand waar ze elkaar snijden (hoek van 45 ° met gelijke breedtelanden, maar het wijzigen van de randbreedten kan de hoek scheeftrekken).

Border example

jsFiddle.

Door bepaalde randen te verbergen, kun je het driehoekseffect krijgen (zoals je hierboven kunt zien door de verschillende delen verschillende kleuren te geven). transparent wordt vaak gebruikt als een randkleur om de driehoeksvorm te bereiken.


484
2017-08-16 03:58



Begin met een basisvierkant en randen. Elke rand krijgt een andere kleur, zodat we ze van elkaar kunnen onderscheiden:

.triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 200px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

welke je geeft deze:

square with four borders

Maar er is geen noodzaak voor de bovenrand, dus stel de breedte in op 0px. Nu onze grens-bodem van 200px zal onze driehoek 200px lang maken.

.triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

en we zullen krijgen deze:

bottom half of square with four borders

Verberg de randkleur vervolgens transparant om de twee zijdriehoeken te verbergen. Omdat de bovengrens effectief is verwijderd, kunnen we ook de border-top-kleur transparant maken.

.triangle {
    border-color: transparent transparent red transparent;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

eindelijk krijgen we deze:

triangular bottom border


436
2017-08-17 11:16



Andere aanpak:

CSS3-driehoeken met transformeren roteren

Driehoekige vorm is vrij eenvoudig te maken met behulp van deze techniek. Voor mensen die liever een animatie zien die uitlegt hoe deze techniek werkt, is het:

gif animation : how to make a triangle with transform rotate

Anders is hier een gedetailleerde uitleg in 4 handelingen (dit is geen tragedie) van hoe je een gelijkbenige rechthoekige driehoek maakt met één element.

  • Opmerking 1: voor niet-gelijkbenige driehoeken en mooie dingen, kunt u stap 4 zien.
  • Opmerking 2: in de volgende fragmenten zijn de prefixen van de leverancier niet opgenomen. ze zijn opgenomen in de codepen demo's.
  • Opmerking 3: de HTML voor de volgende uitleg is altijd:  <div class="tr"></div>

STAP 1 : Maak een div

Makkelijk, zorg er gewoon voor dat width = 1.41 x height. Je mag elke techinque gebruiken (kijk hier) inclusief het gebruik van percentages en padding-bottom om de beeldverhouding te behouden en een te maken responsieve driehoek. In de volgende afbeelding heeft de div een goudgele rand.

Voeg in die div een pseudo element en geef het 100% breedte en hoogte van de ouder. Het pseudo-element heeft een blauwe achtergrond in de volgende afbeelding.

Making a CSS triangle with transform roate step 1

Op dit punt hebben we dit CSS :

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}

.tr: before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
}

STAP 2 : Laten we draaien

Ten eerste, het belangrijkst: definieer een transformatieoorsprong. De standaard oorsprong bevindt zich in het midden van het pseudo-element en we hebben het onderaan links nodig. Door dit toe te voegen CSS naar het pseudo-element:

transform-origin:0 100%; of transform-origin: left bottom;

Nu kunnen we het pseudo-element 45 graden rechtsom draaien met transform : rotate(45deg);

Creating a triangle with CSS3 step 2

Op dit punt hebben we dit CSS :

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
    transform-origin: 0 100%;        
    transform: rotate(45deg);
}

STAP 3: verberg het

Om de ongewenste delen van het pseudo-element (alles dat de div overloopt met de gele rand) te verbergen, hoeft u alleen maar overflow:hidden; op de container. na het verwijderen van de gele rand, krijg je ... a DRIEHOEK! :

DEMO

CSS triangle

CSS:

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
    overflow: hidden;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0079C6;
    transform-origin: 0 100%;
    transform: rotate(45deg);
}

STAP 4: ga verder ...

Zoals getoond in de demonstratie, je kunt de driehoeken aanpassen:

  1. Maak ze dunner of platter door ermee te spelen skewX().
  2. Laat ze naar links, rechts of een andere richting wijzen door te spelen met de transformatie orign en rotatierichting.
  3. Maken enige reflectie met 3D-transformereigenschap.
  4. Geef de driehoeksranden
  5. Zet een afbeelding in de driehoek
  6. Veel meer ... Ontketen de krachten van CSS3!

Waarom deze techniek gebruiken?

  1. Triangle kan gemakkelijk reageren.
  2. Je kunt een maken driehoek met rand.
  3. U kunt de grenzen van de driehoek behouden. Dit betekent dat u de hover-status of klikgebeurtenis alleen kunt activeren wanneer de cursor zich bevindt in de driehoek. Dit kan erg handig zijn in sommige situaties zoals deze waarbij elke driehoek zijn buren niet kan overlappen, zodat elke driehoek zijn eigen zweeftoestand heeft.
  4. Je kunt er een paar maken mooie effecten zoals reflecties.
  5. Het zal u helpen de 2D- en 3D-transformatie-eigenschappen te begrijpen.

Waarom deze techniek niet gebruiken?

  1. Het grootste nadeel is de browser compatibiliteit, de 2D-transformatie-eigenschappen worden ondersteund door IE9 + en daarom kunt u deze techniek niet gebruiken als u IE8 wilt ondersteunen. Zien Kan ik gebruiken voor meer informatie. Voor sommige fancy effecten met behulp van 3D-transformaties zoals de reflectie browserondersteuning is IE10 + (zie kan ik gebruiken voor meer informatie).
  2. U hoeft niets ontvankelijk te zijn en een eenvoudige driehoek is goed voor u, dan moet u gaan voor de grenstechniek die hier wordt uitgelegd: betere browsercompatibiliteit en gemakkelijker te begrijpen dankzij de fantastische berichten hier.

214
2017-07-17 16:30



Hier is een animatie in JSFiddle Ik heb gemaakt voor demonstratie.

Bekijk ook het fragment hieronder.

Dit is een geanimeerde GIF gemaakt van een Screencast

Animated Gif of Triangle

transforms = [
         {'border-left-width'   :'30', 'margin-left': '70'},
         {'border-bottom-width' :'80'},
         {'border-right-width'  :'30'},
         {'border-top-width'    :'0', 'margin-top': '70'},
         {'width'               :'0'},
         {'height'              :'0', 'margin-top': '120'},
         {'borderLeftColor'     :'transparent'},
         {'borderRightColor'    :'transparent'}
];


$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
		  for ( var i=0; i < transforms.length; i++ ) {
        $(this)
         .animate(transforms[i], duration)
		  }
    }).end()
}(jQuery))
.border {
    margin: 20px 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>


Willekeurige versie

/**
 * Randomize array element order in-place.
 * Using Durstenfeld shuffle algorithm.
 */
function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

transforms = [
         {'border-left-width'   :'30', 'margin-left': '70'},
         {'border-bottom-width' :'80'},
         {'border-right-width'  :'30'},
         {'border-top-width'    :'0', 'margin-top': '70'},
         {'width'               :'0'},
         {'height'              :'0'},
         {'borderLeftColor'     :'transparent'},
         {'borderRightColor'    :'transparent'}
];
transforms = shuffleArray(transforms)



$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
		  for ( var i=0; i < transforms.length; i++ ) {
        $(this)
         .animate(transforms[i], duration)
		  }
    }).end()
}(jQuery))
.border {
    margin: 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>


Alles in één keer versie

$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
        $(this)
         .animate({'border-top-width': 0            ,
         					 'border-left-width': 30          ,
         					 'border-right-width': 30         ,
         					 'border-bottom-width': 80        ,
         					 'width': 0                       ,
         					 'height': 0                      ,
                   'margin-left': 100,
                   'margin-top': 150,
         					 'borderTopColor': 'transparent',
         					 'borderRightColor': 'transparent',
         					 'borderLeftColor':  'transparent'}, duration)
    }).end()
}(jQuery))
.border {
    margin: 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>


156
2017-11-29 11:21



Laten we zeggen dat we de volgende div hebben:

<div id="triangle" />

Bewerk nu de CSS stap voor stap, zodat u een duidelijk beeld krijgt van wat er rondom gebeurt

STAP 1: JSfiddle Link:

 #triangle {
        background: purple;
        width :150px;
        height:150PX;
        border-left: 50px solid black ;
        border-right: 50px solid black;
        border-bottom: 50px solid black;
        border-top: 50px solid black;
    }

Dit is een eenvoudige div. Met een heel eenvoudige CSS. Dus een leek kan het begrijpen. Div heeft afmetingen van 150 x 150 pixels met de rand 50 pixels. De afbeelding is bijgevoegd:

enter image description here

STAP 2:  JSfiddle Link:

#triangle {
    background: purple;
    width :150px;
    height:150PX;
    border-left: 50px solid yellow ;
    border-right: 50px solid green;
    border-bottom: 50px solid red;
    border-top: 50px solid blue;
}

Nu heb ik net de randkleur van alle 4 de kanten veranderd. De afbeelding is bijgevoegd.

enter image description here

STAP 3  JSfiddle Link:

#triangle {
    background: purple;
    width :0;
    height:0;
    border-left: 50px solid yellow ;
    border-right: 50px solid green;
    border-bottom: 50px solid red;
    border-top: 50px solid blue;
}

Nu heb ik gewoon de hoogte en breedte van div veranderd van 150 pixels naar nul. De afbeelding is bijgevoegd

enter image description here

STAP 4:  JSfiddle:

#triangle {
    background: purple;
    width :0px;
    height:0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
    border-top: 50px solid transparent;
}

Nu heb ik alle grenzen transparant gemaakt, afgezien van de onderkant. De afbeelding is hieronder bijgevoegd.

enter image description here

STAP 5:  JSfiddle Link:

#triangle {
    background: white;
    width :0px;
    height:0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
    border-top: 50px solid transparent;
}

Nu heb ik de achtergrondkleur gewoon in wit veranderd. De afbeelding is bijgevoegd.

enter image description here

Daarom hebben we de driehoek die we nodig hadden.


39
2018-06-17 06:09



En nu is er iets heel anders ...

In plaats van css-trucs te gebruiken, vergeet dan niet zo eenvoudig oplossingen als html-entiteiten:

&#9650;

Resultaat:

Zien: Wat zijn de HTML-entiteiten voor driehoeken op en neer?


35
2017-12-01 12:40



Beschouw de onderstaande driehoek

.triangle {
    border-bottom:15px solid #000;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    width:0;
    height:0;
}

Dit is wat we krijgen:

Small triangle output

Waarom kwam het uit in deze vorm? In het onderstaande diagram worden de afmetingen uitgelegd, merk op dat 15 px werd gebruikt voor de onderste rand en 10 px werd gebruikt voor links en rechts.

Large triangle

Het is vrij eenvoudig om een ​​rechthoekige driehoek te maken, ook door de rechterrand te verwijderen.

Right angle triangle


29
2018-03-21 11:20



Nog een stap verder, met behulp van css op basis hiervan heb ik pijlen toegevoegd aan mijn rug en volgende knoppen (ja ik weet dat het geen 100% cross-browser is, maar toch glad).

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  margin:20px auto;
}

.triangle-down {
  border-bottom:none;
  border-top: 100px solid red;
}

.triangle-left {
  border-left:none;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}

.triangle-right {
  border-right:none;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}

.triangle-after:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid red;
  margin:0 5px;
  content:"";
  display:inline-block;
}

.triangle-after-right:after {
  border-right:none;
  border-left: 5px solid blue;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;

}

.triangle-before:before {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid blue;
  margin:0 5px;
  content:"";
  display:inline-block;
}

.triangle-before-left:before {
  border-left:none;
  border-right: 5px solid blue;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;

}
<div class="triangle"></div>
<div class="triangle triangle-down"></div>
<div class="triangle triangle-left"></div>
<div class="triangle triangle-right"></div>

<a class="triangle-before triangle-before-left" href="#">Back</a>
<a class="triangle-after triangle-after-right" href="#">Next</a>


27
2017-12-30 16:56



Andere aanpak. Met lineair verloop (voor IE, alleen IE 10+). U kunt elke hoek gebruiken:

.triangle {
    margin: 50px auto;
    width: 100px;
    height: 100px;
/* linear gradient */
    background: -moz-linear-gradient(-45deg,  rgba(255,0,0,0) 0%, rgba(255,0,0,0) 50%, rgba(255,0,0,1) 50%, rgba(255,0,0,1) 100%);
 /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,1)), color-stop(100%,rgba(255,0,0,1)));
 /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* IE10+ */
    background: linear-gradient(135deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* W3C */;
}
<div class="triangle"></div>

Hier is jsfiddle


15
2017-07-26 00:19