相关疑难解决方法(0)

如何在CSS中制作此箭头？

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

活动页面显示为绿色(在本例中为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的箭盒,但是我在左边的缩进时遇到了麻烦.

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

html css css3 css-shapes

Rob*_*vdA

2017 05-23

14
推荐指数

3
解决办法

5622
查看次数

仅使用一个元件的细长六角形按钮

我想用CSS制作一个像这样的按钮而不使用其他元素.

按钮图像

在此输入图像描述

由于按钮有一个border附件,我想我通常需要两个,:before和:after元素在一侧只创建一个箭头.因此,为了在每一侧制作一个箭头,我需要span链接中的另一个元素.

我尝试的第二种方法是你在下面看到的方法.但是使用这种解决方案,它们没有正确居中,箭头的每一边的长度都不同.

有人有解决方案吗？

/* General Button Style */

.button {
  display: block;
  position: relative;
  background: #fff;
  width: 300px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
  color: #e04e5e;
  margin: 40px auto;
  font-family: Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}
/* Button Border Style */

.button.border {
  border: 4px solid #e04e5e;
}
.button.border:hover {
  background: #e04e5e;
  color: #fff;
}
/* Button Ribbon-Outset Border Style */

.button.ribbon-outset.border:after,
.button.ribbon-outset.border:before { …

Run Code Online (Sandbox Code Playgroud)

html css css3 pseudo-element css-shapes

Sno*_*all

2015 10-16

9
推荐指数

1
解决办法

4508
查看次数