Erstellen Sie ein Dreieck mit CSS?

Wie kann ich die folgende Form mit CSS erstellen?Erstellen Sie ein Dreieck mit CSS?

Enter image description here

habe ich versucht, das eine Lösung zu sein:

.triangle:after { 
     position:absolute; 
     content:""; 
     width: 0; 
     height: 0; 
     margin-top:1px; 
     margin-left:2px; 
     border-left: 10px solid transparent; 
     border-right: 10px solid transparent; 
     border-bottom: 10px solid white; 
    } 

    .triangle:before { 
     position:absolute; 
     content:""; 
     width: 0; 
     height: 0; 
     border-left: 12px solid transparent; 
     border-right: 12px solid transparent; 
     border-bottom: 12px solid black; 
    }

Sie können ihn unter Triangle arbeiten sehen. Dies funktioniert, aber mit einem Trick von Grenzen. Gibt es noch eine andere Möglichkeit?

Mit SVG-Vektoren kann dies leicht gemacht werden, aber ich möchte nicht so lange gehen.

Quelle

2013-04-26 Manoj

nur mit CSS? Und mit transparentem Körper? – Bigood

http://apps.eky.hk/css-triangle-generator/ –

http://hedgerwow.appspot.com/demo/arrows –

Ich habe eine WebKit -nur Lösung gefunden, mit der ▲ Charakter:

.triangle { 
 
    -webkit-text-stroke: 12px black; 
 
    color: transparent; 
 
    font-size: 200px; 
 
}

<div class="triangle">&#9650;</div>

Extras:

.210 für text-stroke
CSS-tricks Artikel
Useful HTML shapes

Quelle

2013-04-26 08:13:58 Bigood

Haha, das ist cool +1 –

@Bigood: Das ist feinste Lösung, die ich in dieser Frage & tricky;) – Manoj

@Manoz Even Samuel war gut, er bekam meine Upvote, als das wird Cross-Browser sein, wo dies nicht ist, aber das ist echt cool –

Versuchen Sie es mit ist SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <polygon points="200,10 250,190 160,210" 
    style="fill:lime;stroke:purple;stroke-width:1"/> 
</svg>

Hier ist die tutorial

Quelle

2013-04-26 07:46:11 Sowmya

Bitte lesen Sie http://w3fools.com –

@Bigood Das wurde nicht in Frage erwähnt. Meine Antwort ist älter als sein Kommentar – Sowmya

+1, weil SVG weit eine angemessenere Lösung ist, selbst wenn es nicht das ist, was das OP tatsächlich verlangt hat. Plus das OP ist offensichtlich falsch über SVG - die Antwort hier gegeben kann kaum als "lang" beschrieben werden. – Spudley

.triangle{ 
    width:0; 
    border-bottom:solid 30px black; 
    border-right:solid 30px transparent; 
    border-left:solid 30px transparent; 
} 

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

Das wird ein Dreieck nach oben hin spitz sein. Geben Sie den Rand nicht an der Seite an, auf die Sie zeigen möchten.

Das Obige ist ein gleichseitiges Dreieck. Entfernen Sie border-left, um es zu einem rechtwinkligen Dreieck zu machen.

Quelle

2013-04-26 07:47:07 sakthi

gibt es anders, ohne Randtricks? – Manoj

svg oder ein Bild – soyuka

CSS-Grenze Version:

.triangle { 
    position: relative; 
    width:0; 
    border-bottom:solid 50px black; 
    border-right:solid 30px transparent; 
    border-left:solid 30px transparent; 
} 
.triangle .empty { 
    position: absolute; 
    top:9px; 
    left:-21px; 
    width:0; 
    border-bottom:solid 36px white; 
    border-right:solid 21px transparent; 
    border-left:solid 21px transparent; 
}

ein weißes Dreieck im Inneren des schwarzen hinzu: http://jsfiddle.net/samliew/Hcfsx/

Quelle

2013-04-26 07:58:22

+1 Schöne Lösung :) – Bigood

Betrachten Sie das <canvas> Element verwendet. Ich baue ein einfaches Dreieck auf jsfiddle - nichts Besonderes, noch.

<canvas id="myCanvas" width="20" height="20"></canvas> 

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 

context.beginPath(); 
context.moveTo(10, 0); 
context.lineTo(20, 20); 
context.lineTo(0, 20); 
context.closePath(); 
context.fill();

Quelle

2013-04-26 08:01:57 Imperative

können Sie die Methode verwenden, die ich hier beschrieben: How does this CSS triangle shape work? mit einem gedrehten Pseudoelement. Sie können dann dem gedrehten Pseudoelement einen Rahmen hinzufügen, um den gewünschten Effekt zu erzielen.

Sie können auch diese Technik verwenden, das Dreieck mit Grenzen auf ein Bild, Steigung oder alle nicht ebene Hintergründe anzuzeigen:

DEMO

.tr{ 
 
    width:40%; 
 
    padding-bottom: 28.28%; /* = width/sqrt(2) */ 
 
    position:relative; 
 
    border-bottom: 6px solid rgba(0,0,0,0.8); 
 
    border-right: 6px solid transparent; 
 
    border-left: 6px solid transparent; 
 
    overflow:hidden; 
 
} 
 
.tr:before{ 
 
    content:''; 
 
    position:absolute; 
 
    bottom:0; left:0; 
 
    width:100%; height:100%; 
 
    border-top:6px solid rgba(0,0,0,0.8); 
 
    border-left:6px solid rgba(0,0,0,0.8); 
 
    
 
    -moz-box-sizing:border-box; 
 
    box-sizing:border-box; 
 
    
 
    -webkit-transform-origin:0 100%; 
 
    -ms-transform-origin:0 100%; 
 
    transform-origin:0 100%; 
 
    
 
    -webkit-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 

 

 
/* FOLLOWING JUST FOR THE DEMO */ 
 
body{background:url('http://lorempixel.com/output/people-q-g-640-480-1.jpg');background-size:cover;}

<div class="tr"></div>

Quelle

2015-03-25 11:09:57

Antwort

Verwandte Themen