Ligne droite avec flèche en bas - possible uniquement en CSS?

Est-il possible de réaliser quelque chose comme ça (ligne droite "couper" avec une sorte de flèche/triangle de 30 pixels de la gauche) entièrement en CSS? (fait cela en utilisant des feux d'artifice Adobe, mais je veux me débarrasser des images autant que possible sur mon site Web).Ligne droite avec flèche en bas - possible uniquement en CSS?

Voici ce que j'ai essayé sans succès: http://jsfiddle.net/U8AF6/

Un grand merci

enter image description here

CSS

body { 
background: red; 
} 

.arrow_box { 
    position: relative; 
    background: #88b7d5; 
    border: 1px solid #c2e1f5; 
} 
.arrow_box:after, .arrow_box:before { 
    top: 100%; 
    left: 10%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

.arrow_box:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-top-color: red; 
    border-width: 16px; 
    margin-left: -16px; 
} 
.arrow_box:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-top-color: #c2e1f5; 
    border-width: 22px; 
    margin-left: -22px; 
}

Source

2014-04-21 Greg

duplication possible de [Ajouter triangle à côté de div avec css] (http://stackoverflow.com/questions/18701604/add-triangle-to-side-of-div-with-css) – TylerH

Yup, c'est possible . Qu'avez-vous essayé jusqu'à présent? – j08691

Vous pouvez utiliser des éléments pseudo pour cela. S'il vous plaît voir l'expérience de Nicolas Gallagher pour plus: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

Le code de base est:

.triangle:before, 
.triangle:after { 
    content: ""; 
    position: absolute; 
    bottom: -15px; /* value = - border-top-width - border-bottom-width */ 
    left: 30px; 
    border-width: 15px 15px 0; /* vary these values to change the angle of the vertex */ 
    border-style: solid; 
    border-color: #aaa transparent; 
} 

.triangle:after { 
    bottom: -14px; /* -1px of first element for border */ 
    border-color: #fff transparent; 
}

S'il vous plaît voir une mise en œuvre ici: http://dabblet.com/gist/11146863 Cela ne fonctionne que sur fond solide.

Source

2014-04-21 15:52:39 drublic

il est possible avec quelques transformations CSS3 (une façon que je considère "sale") et si vous voulez soutenir des navigateurs plus anciens CSS3 est hors de question

ici: Fiddle

.bottom-line{ 
    border-bottom:1px solid #999; 
} 

.bottom-line:after{ 
    content:""; 
    display:block; 
    margin-bottom:-8px; 
    border-right:1px solid #999; 
    border-bottom:1px solid #999; 
    -ms-transform: rotate(45deg); /* IE 9 */ 
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ 
    transform: rotate(45deg); 
    width:12px; 
    height:12px; 
    background-color:#fff; 
    z-index:200px; 
    margin-left:100px; 
}

vérifier aussi @ années Drublic répondre. Si vous avez besoin de prendre en charge des navigateurs plus anciens (pre ie9), votre autre option crée une petite image vers le bas, placez-la après une bordure de 1px et donnez une marge -1px à l'image pour qu'elle chevauche la bordure.

Source

2014-04-21 16:00:32 Quad

Ligne droite avec flèche en bas - possible uniquement en CSS?

Répondre

Questions connexes