35

CSSで矢印のあるボックスを作る方法は?

角を丸くするのは簡単です。しかし、画像を使用せずに左側に矢印を作成するアイデアはありません。

で可能にすることは可能ですか

たった一つの要素<p>....</p>

body {
  background: #ff004e;
  padding: 40px
}
p {
  background: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 250px;
  height: 150px
}
<p></p>

ここに画像の説明を入力

4

7 に答える 7

47

このような ：

.arrow {
    border: solid 10px transparent;
    border-right-color: #FFF;
}

デモ: http://jsfiddle.net/sparkup/edjdxjf2/

アップデート ：

css プロパティを使用して空の要素なしで実現することもできます:before

element:before {
    content: "";
    position: absolute;
    top: 50%;                         // half way down (vertical center).
    margin-top: -15px;                // adjust position, arrow has a height of 30px. 
    left:-30px;
    border: solid 15px transparent;
    border-right-color: #FFF;
    z-index: 1;
}

デモ: http://jsfiddle.net/sparkup/y89f1te0/

それが役に立てば幸い

于 2011-08-07T10:37:43.303 に答える
16

Chris Coyier は、単一の要素 (および前後) を使用して CSS で構築された可能な形状の優れたまとめを持っています: http://css-tricks.com/examples/ShapesOfCSS/

于 2011-08-07T22:57:37.517 に答える
13

標準ツールチップ

単純な矢印が必要な場合は、 で疑似要素を追加できますborder-right。

body {
    background:#ff004e;
    padding:40px;
}
p {
    background:white;
    border-radius: 10px;
    width:250px;
    height:150px;
    position: relative;
    display: inline-block;
}
p:before {
    content:"";
    position: absolute;
    height: 0px;
    width: 0px;
    top: 60px;
    left: -29px; /* 1px buffer for zooming problems while rendering*/
    border-width: 15px;
    border-color: transparent white transparent transparent;
    border-style: solid;
}
<p></p>

フィドル 1

ここに画像の説明を入力

フラットエッジ ツールチップ

矢印の平らなエッジが必要な場合は、これを試してください：

body {
    background: #ff004e;
    padding:40px;
}
p {
    background:white;
    border-radius: 10px;
    width:250px;
    height:150px;
    position: relative;
    display: inline-block;
}
p:before {
    content:"";
    position: absolute;
    height: 45px;
    width: 16px; /* 1px buffer for zooming problems while rendering*/
    top: 50px;
    left: -15px; 
    background: white;
}
p:after {
    content:"";
    position: absolute;
    height: 40px;
    width: 15px;
    border-radius: 0 40px 40px 0;
    top: 75px;
    left: -15px;
    background: #ff004e;
    box-shadow: 0 -45px 0 0 #ff004e;
}
<p></p>

フィドル 2

ここに画像の説明を入力

于 2015-02-22T09:24:37.793 に答える
0 
a.right{ border-style: dashed;
  border-color: transparent;
  border-width: 0.53em;
  display: -moz-inline-box;
  display: inline-block;
  font-size: 100px;
  height: 0;
  line-height: 0;
  position: relative;
  vertical-align: middle;
  width: 0; border-left-width: 1em;
  border-left-style: solid;
  border-left-color: #666;
  left: 0.25em; }

上記のコードは右矢印に使用できます。

于 2013-10-04T10:15:32.610 に答える
-1

divを使用したくない場合は、spanを使用できます。

span#pointer{border:solid 10px transparent;border-right-color:#fff;position:absolute;margin:-85px 0 0 -20px;}

http://jsfiddle.net/SSKwn/

于 2011-08-07T11:01:55.963 に答える