如何用右箭頭在div上添加白色邊框？

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

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

來源

2016-11-21 10:49:16 Swapna

1

當然可以使用幾個僞元素。例如：

<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

如何用右箭頭在div上添加白色邊框？

回答

相關問題