web-dev-qa-db-fra.com

Faire du côté droit d'un div une flèche

J'ai un simple div sur une page:

<div>Some Text</div>

Est-il possible, avec CSS, de le faire finir sous forme de flèche. Quelque chose comme:

Div with Arrow

MISE À JOUR

C'est le résultat que je vois avec la solution proposée par web-tiki:

web-tiki proposed solution

Vous voyez les coupures sur la flèche?

Merci, Miguel

htmlcsscss-shapes
21
Miguel Moura

EDIT: Si vous avez besoin que la flèche s'adapte à la hauteur du texte (étant donné qu'elle peut s'afficher sur plusieurs lignes) Vous pouvez utiliser linéaire -gradient fond de la flèche.

VIOLON

Cela peut le rendre:

VIOLON

CSS:

div{
    height:40px;
    background:red;
    color:#fff;
    position:relative;
    width:200px;
    text-align:center;
    line-height:40px;
}
div:after{
    content:"";
    position:absolute;
    height:0;
    width:0;
    left:100%;
    top:0;
    border:20px solid transparent;
    border-left: 20px solid red;
}
18
web-tiki

Cochez cette case

DÉMO

[~ # ~] html [~ # ~] 

<div class="text">Some Text<span class="arrow"></span>
</div>

[~ # ~] css [~ # ~] 

.text {
    background-color:#ff0000;
    color:#fff;
    display:inline-block;
    padding-left:4px;
}
.arrow {
    border-style: dashed;
    border-color: transparent;
    border-width: 0.20em;
    display: -moz-inline-box;
    display: inline-block;    /* Use font-size to control the size of the arrow. */
    font-size: 100px;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: middle;
    width: 0;
    background-color:#fff;   /* change background color acc to bg color */ 
    border-left-width: 0.2em;
    border-left-style: solid;
    border-left-color: #ff0000;
    left:0.25em;
}
6
Santy

Peut-être est au-dessus de vos besoins, mais existe une solution, décrite dans Navigation en fil d'Ariane pur CSS3 , qui permet d'obtenir des cases avec flèche forme, collé un à l'intérieur de chacun.

Il est parfait pour la navigation Breadcrumbs et utilise une autre approche au lieu du simple borders pour obtenir le résultat souhaité. Plus en détail, certaines propriétés CSS utilisées sont les suivantes:

En raison de la prise en charge par ces navigateurs de ces propriétés spécifiques, cette solution fonctionnera correctement depuis IE9 (pas dans IE8).

5
Luca Detomi

Voici un moyen très simple de le faire, mais il utilise la transformation, de sorte que votre navigateur cible doit prendre en charge cette propriété (la plupart des navigateurs à jour le font).

enter image description here

body {
        padding-top: 95px;
}

.crumb-trail {
        background-color: #CCD2D8;
        color: #62717C;
        list-style: none;
        padding: 0px;
        margin: auto;
        width: 80%;
}

.crumb {
        padding: 4px 16px;
        position: relative;
}


.crumb:not(:last-child):before,
.crumb:not(:last-child):after {
        content: '';
        display: inline-block;
        height: 1px;
        width: 17px;
        position: absolute;
        right: -7px;
        background-color: #fff;
}

.crumb:before {
        top: 6px;
        -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        -o-transform: rotate(60deg);
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
}
.crumb:after {
        bottom: 6px;
        -moz-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
        -o-transform: rotate(120deg);
        -webkit-transform: rotate(120deg);
        transform: rotate(120deg);
}
<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="utf-8">
                <title>BreadCrumbs</title>
                <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
                <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
                <link rel="stylesheet" type="text/css" href="breadcrumbs.css">
        </head>
        <body>
                
                <ul class="crumb-trail clearfix">
                        <li class="crumb pull-left">
                                Home
                        </li>
                        <li class="crumb pull-left">
                                Forums
                        </li>
                        <li class="crumb pull-left">
                                Search page
                        </li>
                        <li class="crumb pull-left">
                                Preview: Search criteria
                        </li>
                </ul>
                
                <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        </body>
</html>
3
Ben Petersen

Oui, c'est possible: dans votre html, faites quelque chose comme ceci:

vous avez 2 divs un avec la classe "flèche-droite" et un avec la classe "middle-div"

<div class="arrow-right"></div>
<div class="middle-div"></div>

dans votre fichier css, faites quelque chose comme ceci:

.middle-div {
height: 120px;
float: right;
width: 230px;
background-color: green;
text-align: center;
vertical-align: middle;
line-height: 110px;
 }

.arrow-right {
height: 0px;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid green;
    float: right;
}

prendre plaisir.. :)

1
Gil Fitussi