CSS淡出水平的规则/线风格的div效果没有图像 [英] CSS fade out horizontal rule / line styled div effect without images

问题描述

我是最少使用图像的大粉丝，想知道是否有人有一个策略（或者如果可能的话）用纯静态CSS创建这种东西？

I'm a big fan of minimal use of images and was wondering if anyone had a tactic (or if it's possible) to create this kind of thing with pure static CSS?

http://www.flickr.com/photos/ jahimandahalf / 6780397612 /

我指的是线路的效果看起来变得肤色和淡出，以及它下面的阴影效果。

I'm referring an effect of a line seemingly getting skinnier and fading out and the shadow effect underneath it.

我想是可能做一个像三角形一样的CSS形状技巧：

I was thinking it might be possible to do a CSS shape trick with it like the triangles:

http://css-tricks.com/snippets/css/css-triangle/

或者使用transform在box-shadow上旋转：

Or perhaps with rotation on box-shadow using 'transform':

zenelements.com/blog/css3-transform /

zenelements.com/blog/css3-transform/

任何想法？

推荐答案

您可以使用CSS3的停靠点和 ：后伪元素实现这样的效果。诀窍是通过使用：之后伪元素和位置向< hr>

You can use CSS3's stops and the :after pseudo-element to achieve such an effect. The trick is to add a border to the <hr> element by using the :after pseudo-element and position it in the center of the initial gradient with a soft color that ends with the gradient.

这是一个快速的演示，以及使用某种颜色的另一个演示。

Here is a quick demo, and another demo using some color.

这篇关于CSS淡出水平的规则/线风格的div效果没有图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！