- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在尝试将纯 css 箭头应用于我的水平和垂直菜单的 SELECTED 链接,但似乎无法弄清楚我想要的结果。 stackoverflow 上有一些类似的解决方案,但没有解决我的问题。
UL 有一个边框,这就是问题所在...但我不应该删除 UL 边框。
<li class="selected"><a href="#">Arrow please</a></li>
ul.hor {
border-bottom: 3px solid blue;
}
ul li {
display: inline-block;
position: relative;
}
ul li a {
display: block;
padding: 10px 15px;
}
ul li.selected a {
color: green;
}
ul li.selected:after {
content: "";
width: 12px;
height: 12px;
position: absolute;
background: #fff;
border-top: 3px solid blue;
border-right: 3px solid blue;
}
ul.hor li.selected:after {
left: 0;
right: 0;
bottom: -8px;
margin: 0 auto;
-moz-transform: rotate(315deg);
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
}
ul.ver li.selected:after {
right: -8px;
top: 50%;
margin-top: -6px;
-moz-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
-ms-transform: rotate(225deg);
}
ul.ver {
width: 200px;
border-right: 3px solid blue;
}
ul.ver li {
display: block;
}
ul.ver li a {
display: block;
padding: 10px 15px;
}
body {
width: 90%;
margin: 20px auto;
background: rgb(229, 180, 230);
background: -moz-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
background: -webkit-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
background: -o-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
background: -ms-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
background: linear-gradient(120deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
}
<ul class="hor">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li class="selected"><a href="#">Sit amet</a></li>
<li><a href="#">Consectetur</a></li>
</ul>
<br>
<ul class="ver">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li class="selected"><a href="#">Sit amet</a></li>
<li><a href="#">Consectetur</a></li>
</ul>
最佳答案
这个更容易定位并且有一个完美的三 Angular 形。我们仍在使用变换旋转但不需要变换倾斜。也不需要计算宽度。 Fiddle here .
ul {
overflow: hidden;
}
li {
display:inline-block;position: relative;
}
ul li a {
display: block;padding:20px 15px;
}
ul li.selected a {
color: green;
}
ul.hor li.selected:before,
ul.hor li.selected:after {
content: "";
bottom: 0;
position: absolute;
border-bottom:3px solid blue;
width:9999px;
margin:0 10px;left:50%;
}
ul.hor li.selected:after {
left:auto;right:50%;
}
/*vertical menu starts*/
ul.ver {
width: 200px;
}
ul.ver li {
display: block;
}
ul.ver li a {
padding:10px 15px;
}
ul.ver li.selected:before,
ul.ver li.selected:after {
content: "";
position: absolute;
top:50%;
right: 0;
border-right:3px solid blue;
height:9999px;
margin:10px 0
}
ul.ver li.selected:after {
top:auto;bottom:50%;
}
/*arrow starts*/
ul li.selected a:after {
content: "";
width: 15px;
height: 15px;
position: absolute;
border: solid blue;
border-width: 3px 3px 0 0;
}
ul.hor li.selected a:after {
top:100%;
left: 0;
right: 0;
margin: -10px auto 0;
-moz-transform: rotate(315deg);
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
}
ul.ver li.selected a:after {
left:100%;
margin-left:-10px;
-moz-transform:rotate(225deg);
-webkit-transform:rotate(225deg);
-ms-transform:rotate(225deg);
}
body {
width:90%;margin:20px auto;
background: rgb(229, 180, 230);
background: -moz-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
background: -webkit-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
background: -o-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
background: -ms-linear-gradient(30deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
background: linear-gradient(120deg, rgb(229, 180, 230) 30%, rgb(90, 140, 250) 70%);
}
<ul class="hor">
<li><a href="#">Lorem</a></li>
<li class="selected"><a href="#">Ipsum</a></li>
<li><a href="#">Sit amet</a></li>
<li><a href="#">Consectetur</a></li>
</ul>
<br>
<ul class="ver">
<li class="selected"><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Sit amet</a></li>
<li><a href="#">Consectetur</a></li>
</ul>
关于html - 将纯 css 箭头设置为具有透明或图像背景的菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29465005/
我想禁用我的 UIButton,所以我调用: button.enabled = FALSE; 然而,这会使按钮变得透明,我可以看到它下面的元素。我不介意它改变颜色,我只是不希望它是透明的。 我尝试在
一个常规的 NSButton 如果被禁用,它似乎是透明的。 图像显示了一个样式为“push”的按钮 但是,我想禁用没有透明度的按钮。 我试图以编程方式将 alphaValue 设置为 1.0 但似乎
我正在尝试将Memoji从iPhone/Mac转换为具有透明背景的一系列png,以便我可以创建一个 Sprite 表。当按下空格键时,我可以清楚地看到它具有透明背景,但是在运行 ffmpeg -i s
我想创建一个具有部分透明背景的 View (舞台、窗口)。我有一张包含 Alpha channel 的图像 我在JavaFx中使用了这种场景,我必须将场景填充设置为空,并将根节点背景颜色设置为透明。我
我想创建一个具有部分透明背景的 View (舞台、窗口)。我有一张包含 Alpha channel 的图像 我在JavaFx中使用了这种场景,我必须将场景填充设置为空,并将根节点背景颜色设置为透明。我
我想将 JDesktopPane 设置为透明,并允许我单击下面的内容(例如桌面图标等)。内部框架应保持不透明,并且能够像当前一样在屏幕周围重新定位。有什么想法吗? package test1;
我知道我不是第一个提出此类问题的人,但我认为我的问题有点不同。 我在 MS Paint 上绘制了一个 png 图像,它是一个播放器,当我使用图形对象绘制图像时,我希望图像的背景是透明的。我尝试了一些带
我在 Mac 的 swift 项目中想使用单选按钮,但与我的背景颜色相同。如何将背景设置为不透明或更改背景颜色? 最佳答案 我找到了解决此问题的方法。将单选按钮的文本设置为“”,将 rb 添加到水平堆
我无法将我的相对布局设置为透明。我尝试了很多不同的方法,从类中自定义 View ,添加 android:background="@android:color/transparent"等。它们要么像下图
在 Storyboard中,我创建了一个 ![UINavigationController] 及其 Root View Controller UIViewcontroller。在工具栏中,我有一个分段
我必须让我的导航栏透明,我试过这段代码: self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIB
我注意到,如果我将 View 背景颜色设置为透明,则在 segue 过渡结束后背景颜色会变成黑色(我猜这是默认的“视口(viewport)”颜色)。 我可以改变吗?当然,我可以将颜色从透明更改为紫色,
嘿,有没有可能让滚动条“隐藏”,我不想使用 overflow-y: hidden就像背景:透明或类似的东西 最佳答案 Here您会找到有关如何仅使用 CSS 隐藏滚动条的说明。 在第二个example
默认情况下,背景显示为白色。是否可以通过任何方式将其背景颜色更改为透明..? (function() { var cx = '005519348941191855053:d0uziw7c
我正在尝试添加一个在 div 的左右边缘具有透明度/淡出的嵌入框阴影。我设法添加了一个普通的嵌入框阴影,但我不知道如何为边缘添加透明度。我该怎么做? 这是我正在努力实现的一个例子。 .contai
如何删除 周围的边框并使其背景透明? 最佳答案 试试这个: border: none; border-color: transparent; 关于html - 透明、无边框的文本输入,我们在Stac
是否可以使 JButton 透明(包括边框)而不是文本?我扩展了 swing 的 JButton 并覆盖了它: @Override public void paint(Graphics g) {
众所周知,要使QWidget/QOpenGLWidget半透明/透明,只需: widget->setAttribute(Qt::WA_TranslucentBackground) 但是,由于 QWin
我想知道如何在 Ubuntu 中为所有应用程序制作透明 Gnome 终端,我知道我们可以为桌面制作透明终端,而不是为所有应用程序制作透明终端。我用谷歌搜索了很多,但找不到任何解决方案。谁能告诉我该怎么
我想让 SWT Canvas 的背景透明,以便可以看到它后面的其他小部件。 我尝试将 alpha 设置为 0 并用矩形填充 Canvas ,并且还使用选项 SWT.NO_BACKGROUND 无济于事
我是一名优秀的程序员,十分优秀!