为了账号安全，请及时绑定邮箱和手机立即绑定

如何在CSS中制作此箭头？

首页 猿问 如何在CSS中制作此箭头？

如何在CSS中制作此箭头？

Html/CSS Html5 CSS3
慕妹3146593 2019-07-27 11:15:40
如何在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功能的整个方法的替代方法。使用此方法的一个优点（以及添加单独答案的主要原因之一）是箭头之间的空间可以是透明的。

基本上实现如下：

  1. div每个步骤/项目都有一个，它包含需要显示的文本。让我们说height这div是x（在这个例子中50px）。

  2. 两个伪元素（:before和:after）与它们的创建width相同的父div和height作为半（x/2父）。该:before元件不具有border-bottom而:after元件不具有border-top以避免出现在形状（平行于x轴）的中间的线。

  3. 然后，这两个伪元件skew在相反的方向上变换，并且以这样的方式定位，使得它们直接在彼此下方，从而最终形成所需的形状。

  4. 伪元素被赋予负数z-index以将它们推到父元素后面div（因此它的文本）。

  5. 的first-child和last-child元件被稍微修改（left位置，border伪元素，的background和border的母体div）来实现直边。

  6. 我们可以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文件中。）

  • 根据编号自动调整每个项目的宽度。栏中存在的项目

  • 调整窗口大小时自动调整每个项目的宽度

  • 使用滑块增加或减少条的高度时，自动调整项目的外观。


查看完整回答
反对 回复 2019-07-27
?
月关宝盒

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>

资源

注意

这也允许渐变背景/等

对于其他形状，我前几天也看到了这个编码器


查看完整回答
反对 回复 2019-07-27
  • 3 回答
  • 0 关注
  • 639 浏览

相关问题推荐

为什么字体颜色在Eclipse上没有变化
慕课专栏
更多

添加回答

了解更多

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信