如何在CSS中制作此箭頭？我正在建立一個(gè)類似向?qū)У挠嗁徚鞒蹋矣羞@個(gè)菜單： 活動(dòng)頁面顯示為綠色（在本例中為Model）。如何僅使用CSS制作此箭頭？：目前我通過使用幾個(gè)div和圖像實(shí)現(xiàn)我的目標(biāo)：<div class="menuItem">
<div></div> <!-- The left image -->
<div>Varianten</div>
<div></div> <!-- The right image --></div>左圖： 正確的形象：我找到了一個(gè)SO答案，其中包含了一部分： 帶有CSS的箭盒，但是我在左邊的縮進(jìn)時(shí)遇到了麻煩。如果您對(duì)如何做到這一點(diǎn)有更好的了解，請(qǐng)告訴我！
3 回答
神不在的星期二
TA貢獻(xiàn)1963條經(jīng)驗(yàn) 獲得超6個(gè)贊
這是使用CSS3功能的整個(gè)方法的替代方法。使用此方法的一個(gè)優(yōu)點(diǎn)（以及添加單獨(dú)答案的主要原因之一）是箭頭之間的空間可以是透明的。
基本上實(shí)現(xiàn)如下：
div每個(gè)步驟/項(xiàng)目都有一個(gè)，它包含需要顯示的文本。讓我們說height這div是x（在這個(gè)例子中50px）。兩個(gè)偽元素（
:before和:after）與它們的創(chuàng)建width相同的父div和height作為半（x/2父）。該:before元件不具有border-bottom而:after元件不具有border-top以避免出現(xiàn)在形狀（平行于x軸）的中間的線。然后，這兩個(gè)偽元件
skew在相反的方向上變換，并且以這樣的方式定位，使得它們直接在彼此下方，從而最終形成所需的形狀。偽元素被賦予負(fù)數(shù)
z-index以將它們推到父元素后面div（因此它的文本）。的
first-child和last-child元件被稍微修改（left位置，border偽元素，的background和border的母體div）來實(shí)現(xiàn)直邊。我們可以
active為活動(dòng)元素和hover效果添加一個(gè)類，如下面的示例所示。
.steps {
height: 50px;
width: 150px;
text-align: center;
line-height: 50px;
position: relative;
margin: 10px 0px 10px 20px;
display: inline-block;}.steps:before,.steps:after {
content: '';
position: absolute;
left: 0px;
width: 150px;
height: 25px;
z-index: -1;}.steps:before {
top: -2px;
border-top: 2px solid blue;
border-right: 2px solid blue;
border-left: 2px solid blue;
background: lightblue;
-moz-transform: skew(30deg);
-webkit-transform: skew(30deg);
transform: skew(30deg);}.steps:after {
bottom: -2px;
border-left: 2px solid blue;
border-right: 2px solid blue;
border-bottom: 2px solid blue;
background: lightblue;
-moz-transform: skew(-30deg);
-webkit-transform: skew(-30deg);
transform: skew(-30deg);}.steps:last-child {
background: lightblue;
border-right: 2px solid blue;
border-top: 2px solid blue;
border-bottom: 2px solid blue;
margin-left: 38px;}.steps:first-child {
background: lightblue;
border-left: 2px solid blue;
border-top: 2px solid blue;
border-bottom: 2px solid blue;
margin-right: 18px;}.steps:first-child:before,.steps:first-child:after {
left: 18px;}.steps:last-child:before,.steps:last-child:after {
left: -18px;}/* Hover Styles */.steps:first-child:hover,.steps:last-child:hover,.steps:hover:before,.steps:hover:after {
background: lightgreen;}.steps:first-child:hover {
border-left: 2px solid green;}.steps:last-child:hover {
border-right: 2px solid green;}.steps:hover:before {
border-top: 2px solid green;
border-right: 2px solid green;
border-left: 2px solid green;}.steps:hover:after {
border-left: 2px solid green;
border-right: 2px solid green;
border-bottom: 2px solid green;}.steps:first-child:hover,.steps:last-child:hover {
border-top: 2px solid green;
border-bottom: 2px solid green;}/* Active Styles */.active:first-child,.active:last-child,.active:before, .active:after{
background: bisque;}.active:first-child{
border-left: 2px solid red;}.active:last-child{
border-right: 2px solid red;}.active:before{
border-top: 2px solid red;
border-right: 2px solid red;
border-left: 2px solid red;}.active:after{
border-left: 2px solid red;
border-right: 2px solid red;
border-bottom: 2px solid red;}.active:first-child, .active:last-child{
border-top: 2px solid red;
border-bottom: 2px solid red;}/* Just for creating a non solid color background */body{
height: 200px;
background: -webkit-radial-gradient(center, ellipse, #400, #100);
background: -moz-radial-gradient(center, ellipse, #400, #100);
background: radial-gradient(center, ellipse, #400, #100);}<div class='steps-container'> <div class='steps'>1. Step 1</div> <div class='steps active'>2. Step 2</div> <div class='steps'>3. Step 3</div></div>
注：在hover第一個(gè)孩子的右尖或最后一個(gè)孩子，因?yàn)閦-index的問題的左尖盤旋當(dāng)在上面的代碼中不起作用。如果您需要無縫hover功能，那么在下面的代碼片段中使用元素span內(nèi)部.steps就可以解決它。（感謝The Pragmatick指出這一點(diǎn)）。
.steps {
height: 50px;
width: 150px;
text-align: center;
line-height: 50px;
position: relative;
margin: 10px 0px 10px 20px;
display: inline-block;}.steps span {
position: relative;
z-index: 2;}.steps:before,.steps:after {
content: '';
position: absolute;
left: 0px;
width: 150px;
height: 25px;}.steps:before {
top: -2px;
border-top: 2px solid blue;
border-right: 2px solid blue;
border-left: 2px solid blue;
background: lightblue;
-moz-transform: skew(30deg);
-webkit-transform: skew(30deg);
transform: skew(30deg);}.steps:after {
bottom: -2px;
border-left: 2px solid blue;
border-right: 2px solid blue;
border-bottom: 2px solid blue;
background: lightblue;
-moz-transform: skew(-30deg);
-webkit-transform: skew(-30deg);
transform: skew(-30deg);}.steps:first-child:before,.steps:first-child:after {
border-left: none;}.steps:last-child:before,.steps:last-child:after {
border-right: none;}.steps:last-child {
background: lightblue;
border-right: 2px solid blue;
border-top: 2px solid blue;
border-bottom: 2px solid blue;
margin-left: 38px;}.steps:first-child {
background: lightblue;
border-left: 2px solid blue;
border-top: 2px solid blue;
border-bottom: 2px solid blue;
margin-right: 18px;}.steps:first-child:before,.steps:first-child:after {
left: 18px;}.steps:last-child:before,.steps:last-child:after {
left: -18px;}/* Hover Styles */.steps:first-child:hover,.steps:last-child:hover,.steps:hover:before,.steps:hover:after {
background: lightgreen;}.steps:first-child:hover {
border-left: 2px solid green;}.steps:last-child:hover {
border-right: 2px solid green;}.steps:hover:before {
border-top: 2px solid green;
border-right: 2px solid green;
border-left: 2px solid green;}.steps:hover:after {
border-left: 2px solid green;
border-right: 2px solid green;
border-bottom: 2px solid green;}.steps:first-child:hover,.steps:last-child:hover {
border-top: 2px solid green;
border-bottom: 2px solid green;}.steps:first-child:hover:before,.steps:first-child:hover:after {
border-left: none;}.steps:last-child:hover:before,.steps:last-child:hover:after {
border-right: none;}/* Active Styles */.active:first-child,.active:last-child,.active:before,.active:after {
background: bisque;}.active:first-child {
border-left: 2px solid red;}.active:last-child {
border-right: 2px solid red;}.active:before {
border-top: 2px solid red;
border-right: 2px solid red;
border-left: 2px solid red;}.active:after {
border-left: 2px solid red;
border-right: 2px solid red;
border-bottom: 2px solid red;}.active:first-child,.active:last-child {
border-top: 2px solid red;
border-bottom: 2px solid red;}/* Just for creating a non solid color background */body {
height: 200px;
background: -webkit-radial-gradient(center, ellipse, #400, #100);
background: -moz-radial-gradient(center, ellipse, #400, #100);
background: radial-gradient(center, ellipse, #400, #100);}<div class='steps-container'> <div class='steps'> <span>1. Step 1</span> </div> <div class='steps active'> <span>2. Step 2</span> </div> <div class='steps'> <span>3. Step 3</span> </div></div>
具有透明背景的響應(yīng)式實(shí)施：
對(duì)于具有半透明框的進(jìn)度跟蹤欄的響應(yīng)版本，請(qǐng)?jiān)L問此筆。每個(gè)步驟/項(xiàng)目的寬度以這樣的方式分配，即它們的總和始終是可用寬度的100％，并且每個(gè)項(xiàng)目總是與其他項(xiàng)目的大小相同。
JavaScript用于以下功能:(所有這些功能都是增值功能，可以根據(jù)需要?jiǎng)h除。請(qǐng)注意，刪除JS后，應(yīng)將相應(yīng)的CSS屬性放入CSS文件中。）
根據(jù)編號(hào)自動(dòng)調(diào)整每個(gè)項(xiàng)目的寬度。欄中存在的項(xiàng)目
調(diào)整窗口大小時(shí)自動(dòng)調(diào)整每個(gè)項(xiàng)目的寬度
使用滑塊增加或減少條的高度時(shí)，自動(dòng)調(diào)整項(xiàng)目的外觀。
月關(guān)寶盒
TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超5個(gè)贊
html{
background-color:red;
}div#page {
padding-bottom: 40px;
padding-top: 40px;
text-align: center;
z-index: 1;
position: relative;}div.diamond, div.ribbon, div.right-arrow, div.left-arrow {
display: inline-block;
color: #FFFFFF;
font-size: 22px;
line-height: 38px;
margin: 15px 0;
position: relative;
width: 200px;}div.diamond:before, div.diamond:after, div.ribbon:before, div.ribbon:after, div.right-arrow:before, div.right-arrow:after, div.left-arrow:before, div.left-arrow:after {
content:"";
border-style: solid;
border-width: 0;
height: 0;
position: absolute;
width: 0;}div.diamond {
background-color: #CCCCCC;}div.diamond:after, div.diamond:before {
border-color: transparent #CCCCCC;}div.diamond:before {
left: -19px;
border-width: 19px 19px 19px 0;}div.diamond:after {
right: -19px;
border-width: 19px 0 19px 19px;}div.ribbon {
background-color: #CCCCCC;}div.ribbon:before, div.ribbon:after {
top: 6px;
z-index: -15;}div.ribbon:before {
border-color: #B2B2B2 #B2B2B2 #B2B2B2 transparent;
border-width: 19px;
left: -25px;}div.ribbon:after {
border-color: #B2B2B2 transparent #B2B2B2 #B2B2B2;
border-width: 19px;
right: -25px;}div.right-arrow {
background-color: #CCCCCC;}div.right-arrow:after, div.right-arrow:before {
border-width: 19px 0 19px 19px;}div.right-arrow:before {
border-color: #CCCCCC transparent;
left: -19px;}div.right-arrow:after {
border-color: transparent #CCCCCC;
right: -19px;}div.left-arrow {
background-color: #CCCCCC;}div.left-arrow:after, div.left-arrow:before {
border-width: 19px 19px 19px 0;}div.left-arrow:before {
border-color: transparent #CCCCCC;
left: -19px;}div.left-arrow:after {
border-color: #CCCCCC transparent;
right: -19px;}<div id="page"> <div class="diamond">Diamond</div> <br> <div class="ribbon">Ribbon</div> <br> <div class="right-arrow">Right arrow</div> <br> <div class="left-arrow">Left arrow</div></div>
注意
對(duì)于其他形狀，我前幾天也看到了這個(gè)編碼器
添加回答
舉報(bào)
0/150
提交
取消