Question

我需要使用CSS制作一个箭头像这样： example

我想在菜单的所有内容中应用它，实际上我拥有它： http://jsfiddle.net/x0400t19/

HTML

  <body>
   <nav role="navigation">
      <div onclick="loadViews(1)">Home</div>
      <div onclick="loadViews(2)">About Me</div>
      <div onclick="loadViews(3)">Skills</div>
      <div onclick="loadViews(4)">Portfolio</div>
      <div onclick="loadViews(5)">Contact</div>
    </nav>
 </body>

SASS

nav div {
  font-size: 3em;
  font-family: Code;
  font-weight: 400;
  color:  #2098D1;
  padding: 8px;
  border: #2098D1 solid 3px;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
nav div:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
 }

nav div:hover, nav div:focus, nav div:active {
  color: white;
 }

nav div:hover:before, nav div:focus:before, nav div:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

Answer 1

  #pointer {
    width: 200px;
    height: 40px;
    position: relative;
    background: red;
  }
  #pointer:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid white;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
  }
  #pointer:before {
    content: "";
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid red;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
  }

来源： https://css-tricks.com/examples/ShapesOfCSS/

Answer 2

这是指向实现您所要求的

的codepen的链接

Arrow Button CodePen

.button {
  position: relative;
  margin: 0;
  padding-left: @button-text-padding;
  padding-right: @button-text-padding;
  padding-top: (@button-text-padding / 5);
  padding-bottom: (@button-text-padding / 5);
  background: @button-bg-color;
  color: @button-text-color;
  font-size: @button-text-size;
}

如何使用CSS与箭头边界？

2 个答案: