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></div>

然后就是将这个三角形放到矩形上面注意这里如果想要箭头朝向哪边就将哪边的颜色显示,其余用透明就行

div {
    width:150px;
    height:150px;
    position:relative;
    margin:50px auto;
}
div p {
    border:1px solid #000;
    width:100px;
    height:100px;
}
div span {
    display:block;
    width:0px;
    height:0px;
    border-top:20px solid transparent;
    border-left:20px solid transparent;
    border-right:20px solid transparent;
    border-bottom:20px solid black;
    position:absolute;
    top:-40px;
    left:0;
}
div span.blank {
    border-top:19px solid transparent;
    border-left:19px solid transparent;
    border-right:19px solid transparent;
    border-bottom:19px solid white;
    top:-37px;
    left:1px;
}

这个具体数值大家可以看情况在进行调节!

转载请注明出处:http://www.ly89.cn/detailB/34.html

时间: 09-05

css制作三角形,下拉框三角形的相关文章

css模拟下拉框,vue获取双向绑定的值

原生的下拉框用vue获取值双向绑定简直不要太好用,Duang的一下就行了 <div id="datePrice"> <select v-model="selected" id="dataSel" class="dataSel" v-on:change="change"> <option v-for="item in dateList" v-bind:valu

jQuery制作简洁的多级联动Select下拉框

今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. html代码: <div class="wrap">        <div class="nice-select" name="nice-select">   

自定义下拉框样式,利用prototype制作

<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script> <script type="text/javascript"> // function createDropdown(ele){ this.dropdown=ele; this.val=''; this.index=-1;//默认值时-1 this.palceholder

jQuery之双下拉框

双下拉框要实现的效果,实际上就是左边下拉选择框里的内容,可以添加到右边,而右边同理.写了个简单的例子,来说明一下. 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 <!DOCTYPEhtml> <html> <head> <title>jq

select下拉框的样式在浏览器上的兼容问题

最近项目中遇到了自定义下拉框的默认样式在谷歌,火狐,IE上显示不同的问题. 左侧图片就是重写的样式,下拉框的右侧三角是选用的bootstrap里面的图片,通过绝对定位放过去的. css: select { /*Chrome同Firefox与IE里面的右侧三角显示的样式不同*/ border: solid 1px #ddd; /*将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; p

ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动

今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术  即,AJAX是一个[局部刷新]的[异步]通讯技术, 说白了就是局部刷新. 二.ajax的原理如下图 附上ajax与服务器之间的几种状态,但 4是所有浏览器都支持的的 三.ajax包含的技术如下图 四.ajax开发步骤 步一:创建ajax对象,例如:ajax = createAjax(); 步二:开启异步对象:例如:ajax.o

地址联动下拉框实现

<head> <meta charset="UTF-8"> <title>地址联动下拉框实现</title> <link rel="stylesheet" type="text/css" href="reset.css"> <link rel="stylesheet" type="text/css" href="

selenium处理select标签的下拉框

有时候我们会碰到<select></select>标签的下拉框.直接点击下拉框中的选项不一定可行.Selenium专门提供了Select类来处理下拉框. <select id="status" class="form-control valid" onchange="" name="status"> <option value=""></option&g

基于ecshop 下拉框模糊匹配的集成

步骤 1. 下载文件包 http://download.csdn.net/detail/xiawu1990/8427243 并且解压 2. 将 dropbg.gif 放到 admin/images 目录下 3. 将 searchbox.js 放到 admin/js 目录下 4. 将styles.css放到 admin/styles 目录下 5. 将 <link href="styles/styles.css" rel="stylesheet" type=&qu