如何在CSS中制作此箭頭？我正在建立一個類似向導的訂購流程，我有這個菜單： 活動頁面顯示為綠色（在本例中為Model）。如何僅使用CSS制作此箭頭？：目前我通過使用幾個div和圖像實現我的目標：<div class="menuItem">
<div></div> <!-- The left image -->
<div>Varianten</div>
<div></div> <!-- The right image --></div>左圖： 正確的形象：我找到了一個SO答案，其中包含了一部分： 帶有CSS的箭盒，但是我在左邊的縮進時遇到了麻煩。如果您對如何做到這一點有更好的了解，請告訴我！
3 回答
神不在的星期二
TA貢獻1963條經驗 獲得超6個贊
這是使用CSS3功能的整個方法的替代方法。使用此方法的一個優點（以及添加單獨答案的主要原因之一）是箭頭之間的空間可以是透明的。
基本上實現如下：
div每個步驟/項目都有一個，它包含需要顯示的文本。讓我們說height這div是x（在這個例子中50px）。兩個偽元素（
:before和:after）與它們的創建width相同的父div和height作為半（x/2父）。該:before元件不具有border-bottom而:after元件不具有border-top以避免出現在形狀（平行于x軸）的中間的線。然后，這兩個偽元件
skew在相反的方向上變換，并且以這樣的方式定位，使得它們直接在彼此下方，從而最終形成所需的形狀。偽元素被賦予負數
z-index以將它們推到父元素后面div（因此它的文本）。的
first-child和last-child元件被稍微修改（left位置，border偽元素，的background和border的母體div）來實現直邊。我們可以
active為活動元素和hover效果添加一個類，如下面的示例所示。
.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第一個孩子的右尖或最后一個孩子，因為z-index的問題的左尖盤旋當在上面的代碼中不起作用。如果您需要無縫hover功能，那么在下面的代碼片段中使用元素span內部.steps就可以解決它。（感謝The Pragmatick指出這一點）。
.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>
具有透明背景的響應式實施：
對于具有半透明框的進度跟蹤欄的響應版本，請訪問此筆。每個步驟/項目的寬度以這樣的方式分配，即它們的總和始終是可用寬度的100％，并且每個項目總是與其他項目的大小相同。
JavaScript用于以下功能:(所有這些功能都是增值功能，可以根據需要刪除。請注意，刪除JS后，應將相應的CSS屬性放入CSS文件中。）
根據編號自動調整每個項目的寬度。欄中存在的項目
調整窗口大小時自動調整每個項目的寬度
使用滑塊增加或減少條的高度時，自動調整項目的外觀。
月關寶盒
TA貢獻1772條經驗 獲得超5個贊
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>
注意
對于其他形狀，我前幾天也看到了這個編碼器
- 3 回答
- 0 關注
- 694 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消