1. ホーム
  2. 質問と答え
  3. 右矢印でdivの周りに白い枠線を追加するにはどうすればいいですか？

右矢印でdivの周りに白い枠線を追加するにはどうすればいいですか？

2016-11-21 16 views

答えて

2

あなたが作るためにこのコードを使用することができます同様の矢印

<div class="arrow_box">Arrow</div>

.arrow_box { 
 
\t position: relative; 
 
\t background: #20d568; 
 
\t border: 10px solid #ffffff; 
 
} 
 
.arrow_box:after, .arrow_box:before { 
 
\t left: 100%; 
 
\t top: 50%; 
 
\t border: solid transparent; 
 
\t content: " "; 
 
\t height: 0; 
 
\t width: 0; 
 
\t position: absolute; 
 
\t pointer-events: none; 
 
} 
 

 
.arrow_box:after { 
 
\t border-color: rgba(32, 213, 104, 0); 
 
\t border-left-color: #20d568; 
 
\t border-width: 70px; 
 
\t margin-top: -70px; 
 
} 
 
.arrow_box:before { 
 
\t border-color: rgba(255, 255, 255, 0); 
 
\t border-left-color: #ffffff; 
 
\t border-width: 84px; 
 
\t margin-top: -84px; 
 
}

上述のような同様の断片を生成するためにもwebsiteがあります。 これが役立つことを願っています！あなたが始めるためにのために

出典

2016-11-21 10:57:50

+0

@Sharminコードはいくつかのadjusmentで動作し、それが応答モードでコンパクトなまま。ありがとう。 –

1

HTML

<div class="textBox"> 
    Text 
</div>

CSS

： 

<div>Some Text</div>

はこのような何かをするために、CSSを持つことが可能ですが 

body{ 
    background:#000; 
} 
.textBox{ 
    padding:10px; 
    background-color:green; 
    border-top:5px solid #fff; 
border-bottom:5px solid #fff; 
    border-left:5px solid #fff; 
    width:50px; 
    color:#fff; 
    position: relative; 
} 
.textBox::after{ 
    content: ''; 
    position: absolute; 
    width: 30px; 
    height: 29px; 
    background: green; 
    border-top: 5px solid #fff; 
    border-right: 5px solid #fff; 
    transform: rotate(45deg); 
    top: 2px; 
    right: -18px; 
    z-index: -1 
    }

コードセット：http://codepen.io/swapnaranjitanayak/pen/mOWrzX

出典

2016-11-21 10:49:16 Swapna

1

確かに2つの擬似要素を使用できます。例：

<div class="arrowBox">Some Text</div>

次のCSSを使用（白とは対照的に、ノートを、私は赤い枠を使用しましたので、私はそれを見ることができる）：

.arrowBox{ 
    width: 100px; 
    height: 50px; 
    background: green; 
    border: 5px red solid; 
    display: block; 
    position: relative; 
    line-height: 50px; 
    color: #fff; 
    text-align: center; 
} 

.arrowBox:before{ 
    content: ''; 
    width: 0; 
    height: 0; 
    position: absolute; 
    right: -34px; 
    top: -5px; 
    border-top: 30px solid transparent; 
    border-bottom:30px solid transparent; 
    border-left: 30px solid red; 
    z-index: -1; 
} 

.arrowBox:after{ 
    content: ''; 
    width: 0; 
    height: 0; 
    position: absolute; 
    right: -25px; 
    top: 0; 
    border-top: 25px solid transparent; 
    border-bottom:25px solid transparent; 
    border-left: 25px solid green; 
}

出典

2016-11-21 10:51:19 elmarko

1

何か：ここ

*{ 
 
    box-sizing:border-box; 
 
} 
 
.wrapper{ 
 
    border: 1px solid #ddd; 
 
    display:inline-block; 
 
    position:relative; 
 
} 
 
div.arrow { 
 
    height: 50px; 
 
    line-height: 50px; 
 
    width: 75px; 
 
    background: green; 
 
    position: relative; 
 
    text-align:center; 
 
    border: 1px solid #ddd; 
 
    margin: 10px; 
 
    color:white; 
 
    font-weight:bolder; 
 
} 
 
div.arrow:before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    transform: translate(100%, 0); 
 
    height: 0; 
 
    width: 0; 
 
    border-left: 25px solid green; 
 
    border-top: 25px solid transparent; 
 
    border-bottom: 25px solid transparent; 
 
    z-index:2; 
 
} 
 
div.arrow:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    right: -11px; 
 
    top: 50%; 
 
    transform: translate(100%, -50%); 
 
    height: 0; 
 
    width: 0; 
 
    border-left: 35px solid white; 
 
    border-top: 35px solid transparent; 
 
    border-bottom: 35px solid transparent; 
 
    z-index:1; 
 
} 
 
.wrapper:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 50%; 
 
    transform: translate(100%, -50%); 
 
    height: 0; 
 
    width: 0; 
 
    border-left: 36px solid #ddd; 
 
    border-top: 36px solid transparent; 
 
    border-bottom: 36px solid transparent; 
 
}
<div class="wrapper"> 
 
    <div class="arrow">Text</div> 
 
</div>

出典

2016-11-21 10:59:45 kukkuz

2

は、あなた自身のプロジェクトでこの効果を作成する必要がCSSとHTMLマークアップです。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <meta> 
 
\t <title>title</title> 
 
\t <link> 
 
\t 
 
\t <style type="text/css"> 
 
\t \t 
 
\t \t #base { 
 
\t \t \t border: 3px solid #ccc; 
 
\t \t \t background: red; 
 
\t \t \t display: inline-block; 
 
\t \t \t height: 30px; 
 
\t \t \t position: relative; 
 
\t \t \t width: 50px; 
 
\t \t \t padding: 10px 0px 0px 10px; 
 

 
\t \t } 
 
\t \t #base:before { 
 
\t \t \t border-bottom: 22px solid transparent; 
 
\t \t \t border-left: 19px solid #ccc; 
 
\t \t \t border-top: 22px solid transparent; 
 
\t \t \t content: ""; 
 
\t \t \t height: 0; 
 
\t \t \t right: -22px; 
 
\t \t \t position: absolute; 
 
\t \t \t top: -2px; 
 
\t \t \t width: 0; 
 
\t \t \t 
 
\t \t } 
 
\t \t #base:after { 
 
\t \t \t border-bottom: 20px solid transparent; 
 
\t \t \t border-left: 17px solid red; 
 
\t \t \t border-top: 20px solid transparent; 
 
\t \t \t content: ""; 
 
\t \t \t height: 0; 
 
\t \t \t right: -17px; 
 
\t \t \t position: absolute; 
 
\t \t \t top: 0px; 
 
\t \t \t width: 0; 
 
\t \t \t 
 
\t \t } 
 
\t </style> 
 
</head> 
 
<body> 
 
\t <div id="base" > 
 
\t \t NEXT 
 
\t </div> 
 
</body> 
 
</html>

出典

2016-11-21 12:56:10 dilip

関連する問題

 関連する問題