带内阴影和渐变边框的CSS渐变箭头形状
我想创建一个带有梯度边框的梯度箭头形状按钮,CSS的1Px内阴影. 我已经创建了一个图像来显示按钮和样式规则: 这是我到目前为止所拥有的: .button { color: #FFF; background-color: #D02180 !important; background: -webkit-gradient(linear, 0 0, 0 100%, from(#f84aa4), to(#d02181)); background: -webkit-linear-gradient(#f84aa4, #d02181); background: -moz-linear-gradient(#f84aa4, #d02181); background: -o-linear-gradient(#f84aa4, #d02181); background:
22 2024-04-05
编程技术问答社区
有尖锐边缘和阴影的纽扣
我正在尝试制作 CSS按钮.如下所示,我无法为Corners的第二个HTML元素创建梯度.通常,我会使用边界或简单地旋转元素来创建带有梯度的三角形,但问题是我的三角形不是90度平方. 所需的设计:(灰度,视网膜200%放大) 我的CSS按钮:(蓝色,视网膜200%放大) 有一种更好的方法可以使用CSS创建此按钮? html-code CSS .button { width: 225px; height: 60px; background: #2983d2; } .button:before { position: absolute; width: 0px; height: 0px; left: -13px; content: ""; display
14 2024-04-05
编程技术问答社区
单个DIV水平CSS HEXAGON按钮
我想使用单个Div创建一个以六角形形状的CSS按钮,以保持标记清洁.我一直在伪元素之前和之后进行实验,可以用顶部和底部的Hexagon"点"来完成,但想与他们指向左右指向其余主题.我接近了,但是我无法获得我想要的伪元素.谁能解决此问题? 这是我要做的地方: #hex { background-color:green; width:100px; height:100px; float:left; display:block; } #hex::before { content:""; border-top:50px solid red; border-bottom:50px solid red; border-right:30px solid blue; float:left; } #hex::after { content:""; border-top:50px solid red; border-bottom:50px
12 2024-04-05
编程技术问答社区
创建一个末端带有双箭头的按钮
我正在尝试为按钮实现此效果: 我已经与它进行了几个小时的斗争,我能想到的最好的是这个 See the Proof .btn { border: 0; border-radius: 0; font-weight: 300; font-size: 20px; text-transform: uppercase; } .btn-primary { position: relative; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; transition: all .2s ease; } .btn-primary:before, .btn-primary:after { position: absolute; content: ''; right: -20px; wi
46 2024-04-05
编程技术问答社区
CSS-如何制作带尖角的矩形?
http://nl.tinypic.com/r/jgm90h/8 /p> 我想知道如何使用纯CSS3在上面的链接中具有html按钮标签.你们能帮我吗? 解决方案 诀窍是使用伪类:before和:after.这样尝试: .yourButton { position: relative; width:200px; height:40px; margin-left:40px; color:#FFFFFF; background-color:blue; text-align:center; line-height:40px; } .yourButton:before { content:""; position: absolute; right: 100%; top:0px; width:0px; height:0px; border-top:20px sol
14 2024-04-05
编程技术问答社区
有斜边和较圆的角的神器
我目前正在建立一个网站,该网站需要按钮在按钮的左侧 倾斜.该网站响应迅速,按钮也需要圆角.我也试图避免使用背景图像. 有人可以向我展示解决方案吗?忽略按钮上的图标,我可以做到这一点.我只需要倾斜的一面. body { background: lightblue; font-family: sans-serif; } div { background: purple; width: 200px; padding: 30px; border: 3px solid white; color: white; } Some Text 解决方案 注意:我正在添加一个单独的答案,因为尽管我在评论中链接的答案似乎给出了一个解决方案,但由于边框的存在,该答案也更为复杂边界 - 拉迪乌斯. 可以通过使用以下部分来创建形状: 相对放置的主要容器元素. 两个伪元素大约是父元素宽度的一半.一个元素偏斜以产生偏
0 2024-04-05
编程技术问答社区
悬停时从中心开始填充元素
如何创建一个按钮,以便悬停在背景颜色上填充元素到元素的左右和右侧. 示例: 我知道如何使用CSS3 transitions,可以使其动画到所需的形状,但无法使其从中心过渡. 形状不会改变尺寸,我只想使用transition. 填充它 解决方案 实现类似效果的另一种方法是将linear-gradient用作background-image,将图像放在元素的中心,然后将图像从0% 100%到0% 100%到100% 100% on徘徊. x轴中从0%到100%中递增background-size意味着背景颜色将慢慢填充元素,并保持其位置在中心固定将意味着颜色将从中心到左侧和右边缘生长同时. 梯度的支持低于转换,这是一个缺点,与 Web-Tiki的答案相比用于其他目的. div { position: relative; display: inline-block; padding: 15px 70px; border: 5px so
10 2024-04-05
编程技术问答社区
反应灵敏的箭头式面包屑导航
所以我有一只面包屑,是箭头分开的箭头.棘手的事情是我需要它做出反应.我想我使用VH和大众陷入困境,但是我遇到的问题是白色垫片没有像箭头那样响应.有什么建议么?还是有更好的方法来处理它?我尝试了很多事情,但似乎没有任何事情可以.任何帮助是极大的赞赏.小提琴包括 https://jsfiddle.net.net/8v9ctam0/ /* ---------------------- General Styling ------------------------*/ * { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
6 2024-04-03
编程技术问答社区
装饰性边框css
我已经研究了一段时间,但仍然找不到在CSS上建立这个边界的方法,到目前为止,我只有一侧. 我的意思是与CSS相同的边界,而不是图片 解决方案 这与CSS3合作.看看:/web/css/border-image 首先:定义边框的宽度,就像通常这样做(border: 30px solid...); 然后用边框图像指定图像的过滤: - 您需要使用ulr(). 设置图像 - 然后在px(无单位)或百分比(%)中设置如何切割图像以创建边界.请注意,要为边框瓷砖,图像被切成9个扇区.这个数字是距该切片边界的距离.例如,在这种情况下,在300x300 PX中,如果将其切成100,则产生9个正方形,为100x100. - 最终说出是否应该重复,圆形或拉伸. 提示:这有点困难,所以我的建议是使您的图像在3x3网格中易用,这样,拐角将适合两侧. .box{ width: 200px; height: 200px; background: #E
12 2024-04-02
编程技术问答社区
顶部的透明箭头内侧
我想通过图像制作透明的箭头.该三角形应缩进一个块并显示背景图像. 所需的输出: 我使用skewX() @web-tiki解释了 可以使用我的代码的小提琴演示在这里 谁能告诉我为什么在我的情况下它不起作用? 解决方案 正如问题所述,您的案例与可以通过该答案中描述的相同的skew技术来实现预期的输出.但是,需要对您的情况进行一些调整. 首先,应将偏斜的伪元素(产生边框)添加到纯文本区域的容器中,而不是保存图像的顶部部分.这部分您已经正确完成了. 接下来,您需要定位边框,以便即使在边框中,文本容器的高度也将等于其侧面放置的其他两个图像.为此,您需要将形成边框形成边框的元素放置在纯文本容器(top: 0%)中,而不是上方(您的代码中的bottom: 100%). 那么,如果文本容器具有非透明背景,则需要剪辑它,以使其不存在于创建边框效应的元素背后.这可以通过在等于边框伪元素的height的文本容器上添加padding-top,然后将background-
14 2024-04-02
编程技术问答社区
钮扣上的 "之 "字形边框,其内部也有一个虚线边框。
我正在尝试在按钮上进行锯齿ZAG边框.我已经搜索过一个解决方案,但是该解决方案中的曲折Zag边框位于底部,但我需要在右侧. 我试图重写解决方案,但不幸的是,线性梯度对我来说太难了.我只能创建怪异的形状. 您可以帮助我重写右边的解决方案吗? 我的CSS: -webkit-mask-image: linear-gradient(0deg, transparent 30px, white 30px), linear-gradient(-135deg, white 15px, transparent 15px), linear-gradient(135deg, white 15px, transparent 15px); -webkit-mask-position: left bottom; -webkit-mask-repeat: repeat-x; -webkit-mask-size: 100% 100%, 30px 30px, 30px 30px; live P
32 2024-04-02
编程技术问答社区
CSS3 三角形/剪裁边框
我想知道是否有一种"简单"的方法可以在下面使用CSS3之类的事情,我想避免使用图像和绝对定位,或者宁愿使用某些CSS方法来实现此目的. 我也想避免使用此样式的任何固定高度,因为我将在各种元素上使用相同的样式,这些元素的大小和颜色都不同. 解决方案 您可以在CSS中使用简单的剪辑路径: clip-path:polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%); 结果(在Chrome中): 但是请注意,对于所有浏览器而言,支持并不是那么好.目前,它确实做到了 ff 不起作用我可以说(我相信您可以将SVG用于FF). 更新 好吧,在与SVG一起玩(我不是SVG的专家)之后,我想出了一个在FF中起作用的"原型": 在html中:
12 2024-04-02
编程技术问答社区
CSS中边框底部的弧形线
我需要在CSS和此边框内部的背景图像中需要此图像. 我尝试了 border-radius:0 0 50% 50%; -webkit-border-radius:0 0 50% 50%; ,但没有获得所需的形状. 任何帮助将不胜感激. 解决方案 带边框半径: 您可以在x和y轴上给元素一个不同的边界 - 拉迪乌斯值,以获得带边框和背景图像的弯曲底部. .curved-border { height: 200px; width: 400px; background: url(http://lorempixel.com/400/200/nature/1); border: 3px solid; box-shadow: inset 0px -1px 0px black; /* just to make the bottom border look thicker */ margin-bottom: 4px; } .s
8 2024-04-02
编程技术问答社区
基于边框的三角形不能按预期渲染
我试图在4个旋转的三角形中制作一个完整的正方形,但是当我定位它们时,之间有一个薄的空间.即使是怪异的,当我旋转整个东西时,线条也消失在铬中,但出现在Firefox中的三角形中间(再次形成X). 如何在不添加背景而不会丢失任何大小的情况下删除此行?我尝试使用translate3d,但是在我尝试的各个方面,它都没有删除所有线条,要么降低了正方形的大小,因此不应该发生.所有这些都必须感觉真的很奇怪,所以这里有一个带有最终产品的小提琴,以解释我为什么这样做(只需删除CSS顶部的overflow:hidden属性即可查看其背后的逻辑): 解决方案 为什么有白线? 创建一个div时,它的边界都设置为默认属性. 所以那里有边界,但不完全吗? 在CSS中创建三角形确实是一个黑客.因此,我们以不想打算的方式使用边界. 通过设置边界的属性,使它们创建一个三角形,您将创建一个看起来像像素宽的微小差距,但实际上是0.5px. 哈哈你在开玩笑吧? nope设置宽度为0.5px可以
4 2024-04-02
编程技术问答社区
如何在`边框-*`属性中使用百分数?
我有代码,该代码使用right-arrow使用Twitter Bootstrap 3,nav,我使用border-*属性创建了right-arrow.但是,如果我在right-arrow中使用很长的文本,它不会扩展,如果我使用percents,代码将不起作用... jsfiddle 在 .custom-nav-stacked>li>a { border-radius: 2px; } .custom-nav-stacked>li.active>a:after, .custom-nav-stacked>li.active>a:hover:after, .custom-nav-stacked>li.active>a:focus:after { content: ''; position: absolute; left: 100%; top: 50%; margin-top: -19px; /*margin-left: -1
8 2024-04-02
编程技术问答社区
碗状的下划线或输入的边框
我有一个输入字段,底部只有一个边框,现在我需要在输入的左侧和右上创建一条小线.这很难描述,所以我将以一个示例: input { background-color: transparent; height: 20px; padding: 10px 10px 1px; border: 0; border-bottom: 1px solid red; } 这就是我所拥有的: 这就是我需要的样子: 解决方案 使用多个 box-shadows 输入可以让您具有这种下划线效果: input { height:20px; padding:0 5px; border: 0; box-shadow: -9px 9px 0px -7px red, 9px 9px 0px -7px red; width:300px; }
4 2024-04-02
编程技术问答社区
CSS在云形上应用边框?
我使用不同的div标签通过CSS3绘制了云,我正在尝试在整个形状上添加边框,但是我遇到了麻烦,因为每个形状都有自己的边框,我如何将边框应用于整个云? html: CSS: * { margin: 0; padding: 0; border: 0; } body{ background-color: #4ca3ff; } #cloud { position: absolute; } #bottom_c { position: relative; top: 200px; left: 500px; width: 350px; height: 150px; background-color: #fff; border-rad
10 2024-04-02
编程技术问答社区
用CSS扩展边框
我一直在测试一个带有几个嵌套divs的扩展/投射边界的想法,我在下面有一个工作示例. 基本上,我想实现的是垂直和水平边界,它们延伸到内部内容的盒子外面.有点像起草的外观.如果可能的话,我希望这完全响应. 在我的代码中,我设定了带负余量的高度,以便以视觉上寻找的效果,但是看来我的标记对我想做的事情太肿了.它是响应水平的,但是从垂直方向上我只是隐藏了溢出. 在这样做时,我的头脑中遇到的另一个想法是,每个边界侧(顶,右,底部,左,左,左,左,左,左,左,左,左,左,左,左,左,左)的脑袋是1个divs,1个divs.有点像一个"摇摆"的divs集群. 4个DIV将由父容器携带并响应. 这可以比小提琴中的简单吗?有没有一种方法可以使其在垂直方向和水平上保持灵活性(完全响应)?是否可以在每个边界侧具有可变扩展(例如,一侧为2px,另一侧为4px)? 毫无胡说八道,这是我到目前为止所拥有的: body { margin: 0; padding: 0;
16 2024-04-02
编程技术问答社区
正方形,圆角和凹痕的弯曲边框
我想知道是否有可能在纯CSS中制作一个有圆角和凹痕边框的正方形. 目前我有: #custom-square { position: relative; display: block; width: 75px; height: 75px; border: 2px solid #8A6EF1; border-radius: 10px; background-color: white; } 解决方案 考虑对齐用CSS ,,,,强> SVG似乎更合适. SVG的其他一些原因是: 控制路径(颜色,宽度,曲线...) 用纯色,渐变或图像控制填充 更少的代码 您可以在非平坦背景(渐变或图像) 上显示它 保持用户交互形状的边界(悬停,单击...) 这是一个基本示例,使用 inline svg href =" https://developer.mozilla.org/en-us/docs/web/
14 2024-04-02
编程技术问答社区
带有边框和透明缝隙的CSS三角形切口
我需要用CSS作为我页面之间的各个部分绘制以下模式: 使用skewX()技术来自这个答案,我能够准确地模仿三角形剪切(两个Pseudo---将元素附加到下部的顶部,左侧偏斜,右偏斜,以便上一部分的背景通过): ): ,但是我不知道如何添加边框,如第一个图像所示. 问题是边界和下部之间的差距必须是透明的,因为上一部分的背景可以是梯度,图像等.因此,我不能简单地使用图像三角形切口,因为我不知道它背后会有什么内容. 有什么可能使用CSS执行此操作的方法? 解决方案 可以使用CSS执行此操作,但是我能找到的唯一方法是使用大量梯度模仿边界的非常复杂的方法.这是不正常的边界无法做到的,因为这导致边界延伸超出了他们的聚会点,或者内部区域从未见面. Box Shadow也无法完成,因为边界和填充区域之间的缝隙需要透明. (不是说它不能对那些做不到,而只是我不能让它起作用,也许那些也有办法). 以下是我设法实现边界的方式: 使用四个线性梯度来创建所需的边界.
38 2024-04-02
编程技术问答社区