wake-up-neo.com

Responsives CSS-Dreieck mit prozentualer Breite

Mit dem folgenden Code wird ein Pfeil direkt unter einem <a>-Element erstellt: 

JSFiddle

.btn {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 50px;
    text-align: center;
    color: white;
    background: gray;
    line-height: 50px;
    text-decoration: none;
}
.btn:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 0;
    border-width: 10px 50px 0 50px;
    border-style: solid;
    border-color: gray transparent transparent transparent;   
}
<a href="#" class="btn">Hello!</a>

Das Problem ist, dass wir die Linkbreite angeben müssen, um einen Pfeil mit der richtigen Größe zu erhalten, da die Randbreite nicht in Pixel angegeben werden kann.

Wie lässt sich ein responsives Dreieck in Prozent erstellen?

29
sdvnksv

Sie können ein schiefes und gedrehtes Pseudoelement verwenden, um ein responsives Dreieck unter dem Link zu erstellen:

DEMO (Größe des Ergebnisfensters ändern, um zu sehen, wie es reagiert)

Das Dreieck behält das Seitenverhältnis mit der padding-bottom-Eigenschaft bei.

Wenn Sie möchten, dass die Form an den Inhalt angepasst wird, können Sie die Breite der Klasse .btn entfernen

.btn {
  position: relative;
  display: inline-block;
  height: 50px; width: 50%;
  text-align: center;
  color: white;
  background: gray;
  line-height: 50px;
  text-decoration: none;
  padding-bottom: 15%;
  background-clip: content-box;
  overflow: hidden;
}
.btn:after {
  content: "";
  position: absolute;
  top:50px;  left: 0;
  background-color: inherit;
  padding-bottom: 50%;
  width: 57.7%;
  z-index: -1;
  transform-Origin: 0 0;
  transform: rotate(-30deg) skewX(30deg);
}
/** FOR THE DEMO **/

body {
  background: url('http://i.imgur.com/qi5FGET.jpg');
  background-size: cover;
}
<a href="#" class="btn">Hello!</a>

Weitere Informationen zu responsiven Dreiecken und deren Herstellung finden Sie unter Dreiecke mit Transformationsdrehung (einfache und ausgefallene responsive Dreiecke)

45
web-tiki

Eine andere Lösung wäre, einen CSS-Clip-Pfad zu verwenden, um ein Dreieck aus einem farbigen Block herauszuschneiden. Keine IE - Unterstützung, kann aber für interne Tools usw. verwendet werden.

DEMO

Zur Vereinfachung mit SCSS geschrieben.

.outer {
  background: orange;
  width: 25%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1em;

  p {
    margin: 0;
    text-align: center;
    color: #fff;
  }

  &:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0; 
    right: 0;
    padding-bottom: 10%;
    background: orange;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  }

}
8
Probocop

Ich habe eine Lösung gefunden, die mit jeder Breite/Höhe funktioniert. Sie können zwei Pseudoelemente mit linear-gradient Hintergrund verwenden, wie folgt ( Geige ):

.btn {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 50px;
    text-align: center;
    color: white;
    background: gray;
    line-height: 50px;
    text-decoration: none;
}
.btn:before {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 50%;
    height: 10px;
    background: linear-gradient(to right bottom, gray 50%, transparent 50%)
}

.btn:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 50%;
    height: 10px;
    background: linear-gradient(to left bottom, gray 50%, transparent 50%)
}
5

Eine modifizierte Version des folgenden Codes kann Ihnen dabei helfen 

HTML

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

CSS

.triangle-down {
    width: 10%;
    height: 0;
    padding-left:10%;
    padding-top: 10%;
    overflow: hidden;
}
.triangle-down:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left:-500px;
    margin-top:-500px;

    border-left: 500px solid transparent;
    border-right: 500px solid transparent;
    border-top: 500px solid #4679BD;
}

Weitere Informationen zu responsiven Dreiecken: Responsive CSS Triangles

4
lessismore

Ich habe die anderen Antworten ausprobiert und fand sie entweder zu komplex und/oder unhandlich, um die Form des Dreiecks zu beeinflussen. Ich entschied mich stattdessen, eine einfache Dreiecksform als SVG zu erstellen.

Die Höhe des Dreiecks kann auf einen absoluten Wert oder als Prozentsatz des Rechtecks ​​festgelegt werden, um bei Bedarf in beide Richtungen reagieren zu können.

html, body{
  height:100%;
  width:100%;
}
.outer{
  width:20%;
  height:25%;
  background:red;
  position:relative;
  
}
.inner{
  height:100%;
  width:100%;
  background-color:red;
}
.triangle-down{
  height:25%;
  width:100%;
  position:relative;
}
.triangle-down svg{
  height:100%;
  width:100%;
  position:absolute;
  top:0;
}
svg .triangle-path{
  fill:red;
}
<div class="outer">
<div class="inner"></div>
  <div class="triangle-down">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 2 1">
 <g>
  <path class="triangle-path" d="M0,0 l2,0 l-1,1 z" />
 </g>
</svg>
</div>

Getestete FF, Chrome, IE, Edge, Mob Safari und Mob Chrome

2
Will Jenkins

Ich nahm die Antwort von @ Probocop und kam mit folgendem auf:

<style>
    .btn {
        background-color: orange;
        color: white;
        margin-bottom: 50px;
        padding: 15px;
        position: relative;
        text-align: center;
        text-decoration: none;
    }

    .btn:after {
        background-color: inherit;
        clip-path: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CclipPath id="p" clipPathUnits="objectBoundingBox"%3E%3Cpolygon points="0 0, 1 0, 0.5 1" /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E#p'); /* fix for firefox (tested in version 52) */
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
        content: '';
        height: 50px;
        left: 0;
        position: absolute;
        right: 0;
        top: 100%;
    }
</style>

<a href="#" class="btn">Hello!</a>

Dies funktioniert in Chrome und ich habe ein Update für Firefox hinzugefügt. In Edge funktioniert es nicht. Wenn Sie jedoch die Höhe des Abwärtspfeils verringern, sieht es nicht so schlecht aus.

Bitte beachten Sie, dass Sie bei Verwendung von Bootstrap entweder den Namen ändern oder einige der verwendeten Stile überschreiben müssen. Wenn Sie sich für eine Umbenennung entscheiden, müssen Sie dem .btn-Stil Folgendes hinzufügen:

box-sizing: content-box;
0
nfplee