相关疑难解决方法(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
查看次数

创建一个粗略箭头

我想制作一个看起来像这样的箭头:

但是,这是我能得到的最接近的:

.button {
  margin: 4em 0;
  padding: 2em;
  width: 15%;
  margin: 0 auto;
  text-align: center;
  background-color: #000000;
  color: #ffffff;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  webkit-justify-content: center;
  justify-content: center;
}
.curved-arrow {
  display: inline-block;
  border-top: 10px solid #fff;
  border-bottom: 10px solid #fff;
  border-left: 30px solid #fff;
  border-top-right-radius: 100%;
  border-bottom-right-radius: 100%;
}

Run Code Online (Sandbox Code Playgroud)

<div class="button">
  <div class="curved-arrow"></div>
</div>

Run Code Online (Sandbox Code Playgroud)

这甚至可能吗？我知道我可以使用图像,但是我的设计师在整个网站中使用了多种颜色的几种,我宁愿只使用CSS作为形状.

如果很难看到它在左边从上到下是一条扁平的直线,而在右边的中间是曲线.

html css svg css3 css-shapes

Ish*_*hio

2015 12-18

10
推荐指数

2
解决办法

453
查看次数

标签统计

css ×2

css-shapes ×2

css3 ×2

html ×2

svg ×1

如何在CSS中制作此箭头？

创建一个粗略箭头

标签 统计

标签统计