相关疑难解决方法(0)

透明箭头/三角形缩进

我想在图像上做一个透明的箭头.此三角形应缩进半透明块并显示背景图像.

期望的输出:

透明的缩进CSS三角形

.barShow {
  background-color: #000;
  opacity: 0.5;
}

.barShow:before {
  top: 0%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-top-color: #999;
  border-width: 20px;
  margin-left: -20px;
}

Run Code Online (Sandbox Code Playgroud)

<div class="barShow"></div>

Run Code Online (Sandbox Code Playgroud)

该透明CSS箭应该是没有颜色的透明.

css svg css3 css-shapes

use*_*727

2018 03-09

46
推荐指数

2
解决办法

4万
查看次数

使用CSS在导航栏中显示边框三角形

我正在尝试创建一个带有箭头的导航栏,该项目位于项目上方.这是我想要做的:

在此输入图像描述

对于箭头,我使用了伪元素before和after.以下是一些代码:

body {
  background: #FFFFFF;
  color: #FFFFFF;
  margin: 0px;
  padding: 0px;
  height: 100%;
}
.clear {
  clear: both;
}
.page-wrap {
  width: 980px;
  margin: 0px auto;
  height: 100%;
}
#main-menu {
  background: white;
  height: 55px;
  width: 100%;
  padding: 0px;
  margin: 0px;
  border-bottom: 1px solid black;
}
ul {
  font-family: Arial, Verdana;
  font-size: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul {
  display: none; …

Run Code Online (Sandbox Code Playgroud)

html css css-shapes

Ate*_*pra

2015 06-03

8
推荐指数

1
解决办法

4095
查看次数

使用CSS生成箭头线

我试图生成一条水平直线,中间有一个细分,以显示一个箭头.我们的想法是,该行下显示的内容将提供有关该行上方显示内容的详细信息.这是该行应该是什么样子:

在此输入图像描述

我试图用纯HTML和CSS(没有位图图像)生成它.如果最终产生正确的结果,可以使用Font Awesome.我需要控制线条的粗细和颜色.击穿角度无关紧要(上图所示样品为45度和90度).我知道这个CSS三角技巧,但我想不出将其应用于这种情况的方法.

html css css-shapes

Ism*_*imi

2016 02-09

6
推荐指数

2
解决办法

1万
查看次数

在悬停时动画的箭头线

如何在悬停到箭头线条时将一个线条效果设置为动画效果？

我尝试使用边框执行此操作,但此箭头和线条必须位于具有透明背景的图像上.

我在这张图片的顶部有一条线,我需要在该图像的底部悬停并使用箭头悬停:

这是我的代码:

* {
  box-sizing: border-box;
}
.bg {
  margin: 0 auto;
  background: url('http://i.imgur.com/RECDV24.jpg') center no-repeat;
  background-size: cover;
  width: 100vh;
  height: 100vh;
  position: relative;
  padding: 1em;
}
.line {
  height: 2px;
  position: absolute;
  top: 50%;
  left: 1em;
  right: 1em;
  background: #fff;
}
.bg:hover .line:after {
  height: 10px;
  width: 10px;
  position: absolute;
  content: '';
  background: transparent;
  border: 2px solid #fff;
  border-top-width: 0px;
  border-left-width: 0px;
  transform: rotate(45deg);
  bottom: -6px;
  left: calc(50% - 4px);
} …

Run Code Online (Sandbox Code Playgroud)

html css css3 css-animations css-shapes

Rob*_*son

2016 01-13

5
推荐指数

1
解决办法

1087
查看次数