使用position:relative制作下边框下的小三角

在制作tab选项卡的时候,有时会有下边框,且下边框下另一个头向下的小三角,这全然能够用css来实现,而不必使用背景图片。

由于使用背景图片时会有一个问题,选项卡内容字数不同。导致使用背景图片时无法控制它始终在中间显示。

<ul class="technical_list">

<li class="active-tab">入门指南<div class="triangle"></div></li>

<li>Android<div class="triangle"></div></li>

<li>iOS<div class="triangle"></div></li>

<li>WebIM<div class="triangle"></div></li>

<li>REST API<div class="triangle"></div></li>

</ul>

样式:

.technical_list li{

display: block;

position: relative;

float: left;

margin-left: 30px;

color: #aaa;

font-size: 18px;

line-height: 25px;

cursor:pointer;

}

.message_l .technical_list .technicalCur,

.message_l .technical_list .active-tab {

border-bottom: solid 2px #00addc;

color: #00addc;

}

.message_l .technical_list .technicalCur .triangle,

.message_l .technical_list .active-tab .triangle {

display: block;

}

.triangle{ border-bottom:none;

border-left:solid 3px #fff;

border-right:solid 3px #fff;

border-top:solid 4px #00addc;

width:0;

position:relative;

top:6px;

margin:0 auto;

display: none;}

时间: 2024-08-26 18:19:37

使用position:relative制作下边框下的小三角的相关文章

ie6/7下给table的行tr 添加position:relative;的奇特bug,求大神告知

代码: <!DOCTYPE html> <html> <head> <title>ie6/7下给table的行tr 添加position:relative;的奇特bug,求大神告知</title> <style> * { padding: 0; margin: 0; } table tr { position: relative;float:left;overflow:hidden;z-index:1;height:100%;widt

css制作三角形,下拉框三角形

网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面 首先利用css制作三角形 div { width:0px; height:0px; border-top:20px solid transparent; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid green; } <div>

jQuery制作水平多级下拉菜单

本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <ul class="nav-list"> <li><a href="#">主页</a></li> <li><a href="#">产品</a></li>

设置View只显示透明下边框、透明背景框、阴影背景框的方法

实现的效果如下: 下面的代码是实现一个带边框的xml,很常见 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="@android:color/transparent" /> <str

layer-list实现只有左、右和下边框的圆角矩形

项目中需要实现如下效果的布局 也就是一个左右下角带圆角,上方不带圆角的白色背景矩形,而且只有左.右和下边框,颜色为浅灰色. 当然,切一个.9图片作为背景也能实现,但是能用代码实现的还是尽量用代码实现,因为图片过多一个消耗内存,另一个还增加apk大小. 这种效果可以通过layer-lsit来实现,在drawable文件夹下面建一个xml文件,具体代码如下: 1 <?xml version="1.0" encoding="utf-8"?> 2 <lay

仅显示INPUT下边框

最近在倒腾前端的页面,在某次的需求中我想要这样的一个效果——仅显示INPUT输入框的下边框,和我想象的编写方式不一致,每个标签都有其对应的默认样式,不同的浏览器也有其不同的渲染方式,当然这些知识现在我还没有完全掌握,所以,下面简单记录一下我采用的一种简单实现方式以备后用. 1:渐进式实现的代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仅显示INPU

android 实现一个布局或者view 有上边框 下边框或者 做边框 有边框 或者单一边框的实现

代码中都有详细的解释,这里就不多说了,在使用的时候直接设置为background就行了 <?xml version="1.0" encoding="utf-8"?> <!-- 目的:给一个布局上下有边框,左右没有边框 --> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 先定义一个填充内容区域的颜

避免移动端下边框部分2px

.border-1px { position: relative; } .border-1px:after { display: block; position: absolute; left: 0; bottom: 0; width: 100%; border-top: 1px solid rgba(7, 17, 27, .1); content: ' '; } @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-rat

js实例之制作多个下拉子菜单,实现下拉菜单显示和隐藏效果

1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>无标题文档</title> 4 <style type="text/css"> 5 *{margin:0px auto;padding:0px;} 6 #menu{width:800px;height:40px