网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用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:;
}
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

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

  1. Jquery制作--美化下拉框

    平常我们用的原生select下拉框,大部分样式没办法修改,导致在不同的浏览器里面会跟设计图的风格大相径庭.所以为了能让它美化起来,就用JQ模拟了一个下拉框,可以随意定义样式.原生的下拉框也保留在div ...

  2. 用css写出下拉框(代码转自wq群)

    做网易云音乐首页时遇到的问题,鼠标指在右上角头像时出现下拉框. <style>/* css*/ #body{ float: left; } #xialakuang{ background- ...

  3. css之实现下拉框自上而下展开动画效果&&自下而上收起动画效果

    HTML代码: <div className={CX('font-size-selector-sub-list', { show: shouldSubListShow === true, hid ...

  4. excel 如何制作带下拉框的动态折线图表

    首先我们需要有个类似下图产品销量的基础数据表. 首先将光标放入表格中任意位置,然后插入一个不带点标记的折线图,然后将折线的颜色设置为灰色. 第一次设置成灰色后,一定善用f4快捷键进行快速的折线颜色设置 ...

  5. 关于css中hover下拉框的一个bug

    写hover下拉框的时候会遇到一个奇怪的bug,就是下拉框下来的时候会被所在位置的div遮挡,哪怕下拉框使用的absolute,也会被遮挡. 如图: 这个语言选择的下拉框会被下面的div挡住(截图是已 ...

  6. css制作简单下拉菜单

    要点:定位,隐藏,显示. (一)先建一个两次列表 <ul id="ul1"> <li>首页</li> <li>第二页 <ul& ...

  7. 纯css实现select下拉框并排显示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. div+css模拟select下拉框

    <!DOCTYPE html><html ><head lang="zh"> <meta http-equiv="Content ...

  9. css样式美化 下拉框 select 样式

    <span class="setleft wid80"><span class="fyhbx">*</span>入库类型 : ...

随机推荐

  1. C# 多线程程序隐患

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. 长春理工大学第十四届程序设计竞赛(重现赛)B.Bowling Game

    链接:https://ac.nowcoder.com/acm/contest/912/B 题意: 链接:https://ac.nowcoder.com/acm/contest/912/B来源:牛客网 ...

  3. Netty(6)关闭

      客户端: public static void main(String[] args) throws Exception { final SslContext sslCtx; if (SSL) { ...

  4. NET Core 2.0使用Cookie认证实现SSO单点登录

    NET Core 2.0使用Cookie认证实现SSO单点登录 之前写了一个使用ASP.NET MVC实现SSO登录的Demo,https://github.com/bidianqing/SSO.Sa ...

  5. Android sdk manager 显示 “Done loading packages”,该怎么办?

    试了这个方法:请用管理员的身份运行"SDK Manager.exe".不管用. 下面的方法可以: 在SDK Manager下Tools->Options打开了SDK Mana ...

  6. Java 数字数组随机数工具类 NumberUtils、ArrayUtils、RandomUtils用法

    commons-lang3-3-3.8.1 //----------------------------------------------------------------------- /** ...

  7. JAVA基础之转换流和缓冲流

    个人理解: 在理解的字符流和字节流的区别后.要是想读取指定的编码格式的文件时,特别是不是默认的格式时,就需要转换流了,需要注意的是字符流是需要清除缓冲区的:当需要快速的进行读取时,则需要缓冲流.存在即 ...

  8. 序列化流与反序列化流,打印流,工具类commons-IO

    1序列化流与反序列化流 用于从流中读取对象的操作流 ObjectInputStream    称为 反序列化流 用于向流中写入对象的操作流 ObjectOutputStream   称为 序列化流 特 ...

  9. SQL查找TCar表中同一辆车前后两条记录的CarId,两条记录中有多个字段值一样

    查询同一个表中某一字段值相同的记录 select * from 表名 where 字段 in(select 字段 from 表名 group by 字段 having count(1)>1) s ...

  10. ios 身份证照片识别信息

    一个近乎完整的可识别中国身份证信息的Demo就问问你霸气不