今天在网上看到有个很不错的箭头标题效果
一看原来是用:before和:after实现的,并且利用了border来制作小三角的方法,觉得很不错,于是自己也试着写了个demo,感觉运用在工作当中也是非常的不错。
不多说,上代码:
<div class="list">
<div class="wrap">
<h2>这是标题的左边 <a href="#">红色箭头</a></h2>
</div>
<ul>
<li>微博里也可以方便的管理相册并把图片转播给你的听众</li>
<li>想用更多美图、照片等诠释你的个性并分享给好友?</li>
<li>微博里也可以方便的管理相册并把图片转播给你的听众</li>
</ul>
</div>
<style>
* {margin:0; padding:0;}
body {font-family:\5FAE\8F6F\96C5\9ED1;font-weight: 300; font-size: 13px;line-height: 1.4;}
h1, h2, h3 {font-weight: 300; }
h2 {font-size:14px;position: relative; line-height:2; padding-left:10px;}
.list {width:250px; background:#fff; margin:10px; border:1px solid #eee;}
.wrap {background:#eee;}
.wrap h2 a {float: right;position: relative;text-decoration: none;color:#fff;padding: 0 10px;border-left: 5px solid white; background:#cc0000;-webkit-transition:padding 0.1s linear;-moz-transition:padding 0.1s linear;-ms-transition:padding 0.1s linear;-o-transition:padding 0.1s linear;}
.wrap h2 a:hover {padding:0 14px;}
.wrap h2 a:before,
.wrap h2 a:after {content: "";position: absolute;top: 50%;width: 0;height: 0;}
.wrap h2 a:before {left: -12px;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid white;margin-top:-8px;}
.wrap h2 a:after {left: -5px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid #cc0000;margin-top:-6px;}
.list ul {padding:10px; list-style-type:none;}
.list ul li {padding:5px 0; border-bottom:1px dotted #eee;}
</style>
分解说明:
效果截图:
加了点css3显得更加文艺一点...
恩,就是这样,大家可以试试,很好玩的。
当然这只是很简单的一个小效果,不过想法非常不错,我觉得很多需要做这种类似效果的时候都可以考虑用这个方法来实现,非常简单。
分享到:
相关推荐
在CSS世界中,`:before` 和 `:after` 是两种非常重要的伪元素,它们允许开发者在HTML元素内容之前或之后添加额外的装饰性内容,而无需在文档结构中增加额外的DOM元素。这两个伪元素在CSS2中被引入,而在CSS3中,为了...
接下来,我们将使用`::after`和`::before`伪元素来创建箭头效果。这些伪元素通常用于生成非文本内容,如装饰图案或指示图标等。在这个例子中,我们通过设置不同的边界颜色和宽度来实现箭头的效果: ```css .arrow_...
在CSS中,`::before`和`::after`伪元素是两种非常强大的工具,它们允许开发者在元素内容的前面或后面插入额外的视觉元素,而无需在HTML中添加额外的DOM节点。这两个伪元素在CSS3中被正式定义,以区分伪元素(`::...
在这个例子中,`::before`和`::after`被用来创建导航栏项的三角形箭头,通过调整边框颜色和位置来实现。当鼠标悬停在`<li>`元素上时,还可以改变伪元素的样式,以实现悬停效果。 总结来说,CSS的伪元素`::before`和...
在网页设计中,聊天窗口是常见的一种交互元素,主要用于用户之间的文字、图片或者表情交流。在本主题"css 聊天窗口 小箭头 气泡效果"中,我们将探讨如何使用纯CSS技术来创建具有小箭头和气泡效果的聊天窗口。这个...
描述中提到的"用border写的左右上下箭头"是指利用CSS边框(border)属性来创建这种箭头效果,这是一种巧妙且灵活的方法,尤其适用于简单的UI元素。 首先,让我们深入了解一下CSS中的`border`属性。`border`属性是一...
在IT行业中,CSS3是一种强大的样式表语言,用于定义网页元素的布局、颜色、字体等视觉表现。这个压缩包“css3箭头菜单效果.zip”显然包含了一个利用CSS3实现的箭头菜单效果示例。箭头菜单在网站设计中非常常见,它...
在网页设计中,CSS(Cascading Style Sheets)是一种用于定义HTML或XML(包括SVG、XHTML等)文档中元素外观、布局和结构的重要样式语言。利用CSS,我们可以轻松实现各种复杂的视觉效果,包括制作上下左右箭头。这些...
在CSS3中,3D时间轴效果是一种富有视觉吸引力且能清晰展示项目进度或历史事件序列的设计技术。这种效果利用了CSS3的transform、perspective和伪元素等特性,为网页添加了深度和动态感。下面我们将深入探讨如何通过...
在网页设计中,下拉菜单是一种常见的交互元素,它能够有效地组织和展示大量的导航选项。而利用jQuery实现带箭头的下拉菜单,则可以让用户体验更加友好,视觉效果更加精致。本文将详细讲解如何使用jQuery和CSS来创建...
**jQuery和CSS3箭头式滑块特效**是一种在网页设计中常见的交互元素,它能够为用户提供直观且吸引人的导航体验。在这个特效中,我们利用了JavaScript库**jQuery**的强大功能以及**CSS3**的新特性,将传统的input ...
在网页设计中,图片或元素的无缝滚动效果是一种常见的动态展示方式,尤其适用于展示一系列相关的图像,如轮播图或导航指示箭头。这个“css实现图片(箭头)无缝滚动(向右)”的主题主要涉及到CSS动画和定位技术,...
在IT行业中,图片切换是一种常见的交互设计,广泛应用于网站、应用程序和各种用户界面中。"图片切换带箭头"的实现通常涉及到前端开发技术,尤其是HTML、CSS和JavaScript的组合应用。这种功能允许用户通过点击或滑动...
在这个主题中,我们关注的是如何利用Bootstrap和CSS3创建一种特殊的步骤条,它包含带有箭头指向的按钮,这些按钮可以指示用户操作流程的方向。下面将详细阐述实现这个功能所需的知识点。 1. **Bootstrap基础**: -...
在IT行业中,CSS3是一种强大的样式表语言,用于定义网页元素的布局、颜色、字体等视觉效果。这个压缩包文件“纯CSS3实现多种(上下、左右、转弯)箭头绘制插件源码.zip”提供了利用CSS3创建各种箭头形状的源代码,这...
SVG是一种基于XML的矢量图像格式,允许在网页上创建和操作复杂的图形。它的一大优势是图形可以无限缩放而不失真,非常适合用于绘制线条、形状等元素。在SVG中画箭头,我们可以利用`<path>`元素配合SVG路径数据来实现...
此外,CSS还提供了其他方法来创建箭头,如使用伪元素(`::before`和`::after`),以及`border-color`来创建彩色箭头。 总的来说,纯CSS实现箭头是一种高效且灵活的技巧,可以帮助开发者在不依赖图片的情况下创建美观...
在网页设计中,"带箭头的下拉菜单"是一种常见的交互元素,它通常用于网站导航,帮助用户更快地访问深层次的页面。这种菜单在鼠标悬停时会展示出一个带有箭头的下拉列表,使得网站的层级结构更加直观易用。下面将详细...
在前端开发中,CSS(Cascading Style Sheets)是一种用于定义网页中元素样式的重要技术,而JavaScript则是一种广泛用于增加网页交互性的编程语言。在这个名为"CSS制作带箭头的标签.zip"的压缩包中,包含两个核心文件...