那些遇到过的问题

如何在CSS中制作此箭头？

Rob*_*vdA 14 html css css3 css-shapes

我正在建立一个类似向导的订购流程,我有这个菜单: 菜单

活动页面显示为绿色(在本例中为Model).

如何仅使用CSS制作此箭头？:

箭头

目前我通过使用几个div和图像实现我的目标:

<div class="menuItem">
    <div></div> <!-- The left image -->
    <div>Varianten</div>
    <div></div> <!-- The right image -->
</div>
Run Code Online (Sandbox Code Playgroud)

左图: 在此输入图像描述

正确的形象:在此输入图像描述

我找到了一个SO答案,其中包含了一部分: 带有CSS的箭盒,但是我在左边的缩进时遇到了麻烦.

如果您对如何做到这一点有更好的了解,请告诉我!

Gab*_*oli 29

如果箭头之间的空格不需要是透明的(它是纯色),您可以使用:before和:after创建边(在DOM中没有新元素)

基本上,它会创建带有我们想要的边框的旋转方块,并相应地放置它们

#flowBoxes {
    margin:auto;
    padding:20px;
    min-width:700px;

}
#flowBoxes div {
    display:inline-block;
    position:relative;
    height:25px;
    line-height:25px;
    padding:0 20px;
    border:1px solid #ccc;
    margin-right:2px;
    background-color:white;
}

#flowBoxes div.right:after{
    content:'';
    border-top:1px solid #ccc;
    border-right:1px solid #ccc;
    width:18px;
    height:18px;
    position:absolute;
    right:0;
    top:-1px;
    background-color:white;
    z-index:150;
    
    -webkit-transform: translate(10px,4px) rotate(45deg);
       -moz-transform: translate(10px,4px) rotate(45deg);
        -ms-transform: translate(10px,4px) rotate(45deg);
         -o-transform: translate(10px,4px) rotate(20deg); 
            transform: translate(10px,4px) rotate(45deg);
}

#flowBoxes div.left:before{
    content:'';
    border-top:1px solid #ccc;
    border-right:1px solid #ccc;
    width:18px;
    height:18px;
    position:absolute;
    left:0;
    top:-1px;
    background-color:white;
    z-index:50;
    
    -webkit-transform: translate(-10px,4px) rotate(45deg);
       -moz-transform: translate(-10px,4px) rotate(45deg);
        -ms-transform: translate(-10px,4px) rotate(45deg);
         -o-transform: translate(-10px,4px) rotate(20deg);
            transform: translate(-10px,4px) rotate(45deg);
}
#flowBoxes .active{
    background-color:green;
    color:white;
}
#flowBoxes div.active:after{
    background-color:green;
}
Run Code Online (Sandbox Code Playgroud) 
<div id="flowBoxes">
        <div class="right">Diersoort / I&amp;R</div>
        <div class="left right active">Model</div>
        <div class="left right">Varianten</div>
        <div class="left right">Bedrukkingen</div>
        <div class="left">Bevestiging</div>
</div>
Run Code Online (Sandbox Code Playgroud)

  • 挑剔,但为什么不使用`:nth-​​child`伪类而不是*CSS*类来定位第一个和最后一个元素？转换属性的+ -o-`和`-moz -`前缀不再[真的有必要](http://caniuse.com/#feat=transforms2d). (5认同)

Har*_*rry 12

这是使用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);
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

注:在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);
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

屏幕截图:(悬停在第二项上)

在此输入图像描述

具有透明背景的响应式实施:

对于具有半透明框的进度跟踪栏的响应版本,请访问此笔.每个步骤/项目的宽度以这样的方式分配,即它们的总和始终是可用宽度的100%,并且每个项目总是与其他项目的大小相同.

JavaScript用于以下功能:(所有这些功能都是增值功能,可以根据需要删除.请注意,删除JS后,应将相应的CSS属性放入CSS文件中.)

  • 根据编号自动调整每个项目的宽度.栏中存在的项目
  • 调整窗口大小时自动调整每个项目的宽度
  • 使用滑块增加或减少条的高度时,自动调整项目的外观.

在此输入图像描述

jbu*_*483 7

这里有一些很棒的箭头

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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

资源

注意

这也允许渐变背景/等

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

归档时间：

查看次数：

5622 次

最近记录：

10 年，7 月 前
带有CSS的箭头框 24
在CSS中的横幅中实现类似箭头的形状 11
带有CSS的框之前和之后的箭头 1
更多相关链接
相关归档
在</ div>之后防止换行 80
用于在IE11中无法单击的表单中输入的图像标签 60
如何在CSS中创建具有相等列宽的表？ 47
面板内的JavaFX Panel自动调整大小 45
添加Expires标头 44
CKEDITOR - 防止将图像尺寸添加为css样式 37
使用Bootstrap 3如何隐藏表格中的列？ 28
在IE中旋转文本,不会变得难看 15
错开CSS3动画时间 8
如何在CSS中获得这样的角度,这不是圆的？ 1
难疑归档
在函数中使用全局变量 2939
不区分大小写'包含(字符串)' 2785
什么是__init__.py？ 2074
类型检查:typeof,GetType还是？ 1435
Memcached与Redis？ 1398
接口与抽象类(通用OO) 1372
如何获取所有Git分支 1371
在Bash中循环遍历一串字符串？ 1371
更改列:null为非null 1177
我是否提交了由npm 5创建的package-lock.json文件？ 1164