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

    re模块 准备: flags有很多可选值: re.I(IGNORECASE)忽略大小写,括号内是完整的写法 re.M(MULTILINE)多行模式,改变^和$的行为 re.S(DOTALL)点可以匹配 ...

  2. Python中输出字体的颜色设置

    1.实现过程 终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关.控制字符颜色的转义序列是以ESC开头,即用\033来完成 2.书写过程 开头部分: \033[显示方式;前 ...

  3. 应用的入口——Startup

    应用的入口——Startup 一个ASP.NET Core应用被启动之后就具有了针对请求的处理能力,而这个能力是由管道赋予的,所以应用的启动同时意味着管道的成功构建.由于管道是由注册的服务器和若干中间 ...

  4. 运行node提示:events.js:160 throw er; // Unhandled 'error' event

    运行node时遇到下述提示: events.js:160  throw er; // Unhandled 'error' event或者events.js:160       throw er; // ...

  5. (转)命令passwd报错因inode节点处理记录

    命令passwd报错因inode节点处理记录 原文:http://blog.sina.com.cn/s/blog_506ed9e6010106kj.html 故障现象:      1.修改密码时报错 ...

  6. 渣渣菜鸡的 ElasticSearch 源码解析 —— 环境搭建

    关注我 转载请务必注明原创地址为:http://www.54tianzhisheng.cn/2018/08/25/es-code01/ 软件环境 1.Intellij Idea:2018.2版本 2. ...

  7. 使用jstack分析解决进程死锁问题

    项目启动后不久就会出现死锁的现象,一直不知道什么原因造成的,后来经过大神的指点,解决了这个问题. 流程如下: 1.环境jdk1.6以上: 2.linux下使用ps aux|grep tomcat 命令 ...

  8. 浅谈BFC与高度塌陷

    这个概念我大概是去年时候接触到的吧,略略记录了一下,没有深入研究,恰逢最近秋招,在这里写一写,顺便加深自己的印象. 什么是BFC? 页面中的元素都隐含一个属性Block Formatting Cont ...

  9. Linux下软件安装的四种方式

    一.源码安装 步骤: 下载,解压源码(常见的源码打包格式:.tar.gz/.tar.bz2); 可以直接下载源码再上传至linux服务器,或者在联网状态下,直接通过wget等命令获取源码安装包;源码解 ...

  10. bootstrap中container和container-fluid的区别与用法

    对bootstrap框架有一定了解的朋友都知道,一般页面布局中的开头会使用到container或container-fluid类,那么它们有什么区别呢?不急!下面为您讲解. 我们先来看看官方对这两个类 ...