Как добавить белую рамку вокруг div с правой стрелкой?

Question

У меня есть простой DIV на странице:

<div>Some Text</div> 

Возможно ли с помощью CSS, чтобы сделать что-то вроде этого:

Answer 1

Вы можете использовать этот код, чтобы сделать похоже стрелка

<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, чтобы произвести подобный фрагмент, как один, упомянутых выше. Надеюсь, это поможет!

Answer 2

HTML

<div class="textBox"> 
    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 
    } 

Codepen: http://codepen.io/swapnaranjitanayak/pen/mOWrzX

Answer 3

Несомненно, может использоваться пара псевдоэлементов. Пример:

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

Answer 4

Что-то для вас, чтобы начать работу:

*{ 
 
    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>

Answer 5

Вот 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>