web-dev-qa-db-ja.com

divの右側を矢印として作成します

ページに簡単なdivがあります：

<div>Some Text</div>

CSSを使用して、矢印として仕上げることは可能ですか？何かのようなもの：

Div with Arrow

[〜＃〜] update [〜＃〜]

これは、web-tikiが提案したソリューションで見た結果です。

web-tiki proposed solution

矢印の切れ目が見えますか？

ありがとう、ミゲル

htmlcsscss-shapes
21
Miguel Moura

EDIT：矢印をテキストの高さに合わせる必要がある場合（複数の行に表示できると考えて） linear -gradient 矢印の背景。

[〜＃〜] fiddle [〜＃〜]

これはそれを作ることができます：

[〜＃〜] fiddle [〜＃〜]

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

これを確認してください

[〜＃〜] demo [〜＃〜]

[〜＃〜] 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

多分あなたのニーズを超えているかもしれませんが、 Pure CSS3 breadcrumb navigation で説明されている解決策が存在し、矢印付きのボックスを取得できます形、それぞれの中に1つ立ち往生。

パンくずリストのナビゲーションに最適で、単純なbordersの代わりに別のアプローチを使用して、目的の結果を取得します。より詳細には、使用されるいくつかのCSSプロパティは次のとおりです。

ブラウザはこれらの特定のプロパティをサポートしているため、このソリューションはIE9（IE8ではない）以降で正常に動作します。

5
Luca Detomi

これを作成する非常に簡単な方法を次に示しますが、変換を使用するため、ターゲットブラウザーはそのプロパティをサポートする必要があります（最新のブラウザーがサポートします）。

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

はい、可能です：あなたのhtmlで次のようなことをしてください：

2つのdivがあり、1つはクラス「arrow-right」、もう1つはクラス「middle-div」です

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

あなたのcssファイルで次のようなことをしてください：

.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;
}

楽しい.. ：）

1
Gil Fitussi