Question

我正试图获得箭头的CSS，如图所示。经过一些程序，我们只能点击箭头。我需要与图像或CSS。锄头这样做？

enter image description here

拨弄::

html ::

  <div id="pacmen" class="pacman">
    </div>

的CSS ::

    .pacman {
 /* width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 120px solid yellow;
  border-left: 60px solid yellow;
  border-bottom: 60px solid yellow;
  border-top-left-radius: 1px;
  border-top-right-radius: 1px;
  border-bottom-left-radius: 1px;
  border-bottom-right-radius: 1px;*/
    width: 0px;
    height: 0px;
    border-right: 40px solid transparent;
    border-top: 50px solid yellow;
    border-left: 130px solid yellow;
    border-bottom: 49px solid yellow;
    border-top-left-radius: 1px;
    border-top-right-radius: 1px;
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    left: 96px;
    position: absolute;
    rota

}
#pacmen:before {
  /* content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid purple;
   border-bottom: 13px solid transparent;
   margin: 13px 0 0 -25px;*/
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 50px solid yellow;
    border-bottom: 50px solid transparent;
    margin: -50px 0 0 -178px;
}

上面的代码我好像下面的

enter image description here

请建议如何获得第一张图像箭头？

Answer 1

这样的事情？

.pacman {
 /* width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 120px solid yellow;
  border-left: 60px solid yellow;
  border-bottom: 60px solid yellow;
  border-top-left-radius: 1px;
  border-top-right-radius: 1px;
  border-bottom-left-radius: 1px;
  border-bottom-right-radius: 1px;*/
    width: 0px;
    height: 0px;
    border-right: 0px solid transparent;
    border-top: 50px solid yellow;
    border-left: 130px solid yellow;
    border-bottom: 50px solid yellow;
    border-top-left-radius: 1px;
    border-top-right-radius: 1px;
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;


    display:inline-block;
    margin-left:10%;

}
#pacmen:before {
  /* content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid purple;
   border-bottom: 13px solid transparent;
   margin: 13px 0 0 -25px;*/
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 50px solid yellow;
    border-bottom: 50px solid transparent;
    margin: -50px 0 0 -178px;
}

HTML：

<div id="pacmen" class="pacman">
</div>

Answer 2

您可以使用after和before CSS属性

来获取它

<强> Working Demo

取自 example

HTML

<div id="crumbs">
    <ul>
        <li><a href="#1">One</a></li>
        <li><a href="#2">Two</a></li>
        <li><a href="#3">Three</a></li>

    </ul>
</div>

<强> CSS

#crumbs {
    text-align: center;
}

    #crumbs ul {
        list-style: none;
        display: inline-table;
    }
        #crumbs ul li {
            display: inline;
        }

        #crumbs ul li a {
            display: block;
            float: left;
            height: 50px;
            background: #3498db;
            text-align: center;
            padding: 30px 40px 0 80px;
            position: relative;
            margin: 0 10px 0 0; 

            font-size: 20px;
            text-decoration: none;
            color: #fff;
        }
            #crumbs ul li a:after {
                content: "";  
                border-top: 40px solid transparent;
                border-bottom: 40px solid transparent;
                border-left: 40px solid #3498db;
                position: absolute; right: -40px; top: 0;
                z-index: 1;
            }

            #crumbs ul li a:before {
                content: "";  
                border-top: 40px solid transparent;
                border-bottom: 40px solid transparent;
                border-left: 40px solid #FFF;
                position: absolute; left: 0; top: 0;
            }

                #crumbs ul li:first-child a {
                    border-top-left-radius: 10px; border-bottom-left-radius: 10px;
                }
                #crumbs ul li:first-child a:before {
                    display: none; 
                }

                #crumbs ul li:last-child a {
                    padding-right: 80px;
                    border-top-right-radius: 10px; border-bottom-right-radius: 10px;
                }
                #crumbs ul li:last-child a:after {
                    display: none; 
                }

            #crumbs ul li a:hover {
                background: #fa5ba5;
            }
                #crumbs ul li a:hover:after {
                    border-left-color: #fa5ba5;
                }

Answer 3

css更改：

.pacman {
width: 0px;
height: 0px;
border-right: 50px solid transparent;
border-top: 50px solid yellow;
border-left: 130px solid yellow;
border-bottom: 50px solid yellow;
border-top-left-radius: 1px;
border-top-right-radius: 1px;
border-bottom-left-radius: 1px;
border-bottom-right-radius: 1px;
left: 106px;
position: absolute;
background: yellow;
}

#pacmen:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid yellow;
border-bottom: 50px solid transparent;
margin: -49px 0 0 49px;
}

Live Example

获得css箭头样式重叠样式

3 个答案: