用CSS样式写选择框右侧小三角

直接上代码!
<!DOCTYPE html>
<html lang="en">
<head>
<title>小三角</title>
<style>
.up-triangle{
width:0px;
height:0px;
border-bottom:30px solid #000;
border-left:15px solid transparent;
border-right:15px solid transparent;
margin:100px auto;
}
.down-triangle{
width:0px;
height:0px;
border-top:30px solid #000;
border-left:15px solid transparent;
border-right:15px solid transparent;
margin:100px auto;
}
.left-triangle{
width:0px;
height:0px;
border-right:30px solid #000;
border-top:15px solid transparent;
border-bottom:15px solid transparent;
margin:100px auto;
}
.right-triangle{
width:0px;
height:0px;
border-left:30px solid #000;
border-top:15px solid transparent;
border-bottom:15px solid transparent;
margin:100px auto;
}
</style>
</head>
<body>
<div class="up-triangle"></div>
<div class="down-triangle"></div>
<div class="left-triangle"></div>
<div class="right-triangle"></div>
</body>
</html>
用CSS样式写选择框右侧小三角的更多相关文章
- 正确分析结构使用正确的HTML标签。CSS样式写一起。
在内容中 一行内容包括三张图片,每张图片下面有标题和具体介绍,那么可以使用: 分析和解决如下步骤: 1,一行三块,先向左浮动成为一行float:left. 2,把他们的宽度平分三份,33.3%.三份都 ...
- WebStorm 配置微信小程序开发 用html样式打开wxml 用css样式打开wxss 配置微信小程序提醒
1.点开preferences 2.搜索找到“File Types” 3.找到"HTML",点击“+”按钮,添加“*.wxml”然后“apply” 4.和3一样,再找到 ‘casc ...
- CSS样式写在JSP代码中的几种方法
1.行内样式. 可以直接把css代码写在现有的HTML标签元素的开始标签里面,并且css样式代码要写在style=" "双引号中才可以, 如: <p style=" ...
- 【css2、css3】css改变select选择框的样式
效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 移动web之用CSS样式写如苹果手机的开关键
话说这个问题纠结了近一个小时,为什么呢?看看就知道了. 在公司的商旅Web移动版本项目上有这么一个交互,需要模仿iphone自带的开关,好吧,肯定没什么问题. Tip:请使用Chrome查看以下案例 ...
- css样式写一个三角形
<style> .test{ border-color:transparent #abcdef transparent transparent; border-style:solid; b ...
- 纯CSS样式写刘海屏效果
1. 效果: 2. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- CSS样式实现两个图片平分三角
<div class='pageOption'> <a href='#' class='option' > <img src='http://imgsrc.hubbles ...
- css自定义 range radio select的样式滑轮,按钮,选择框
写在前面: 之前踩坑css的时候,遇到滑轮,按钮,选择框这类型的东西,为了页面效果,总是需要自定义他们的样式,而不使用他们的默认样式.当时写的时候,我也是蛮头疼的,弄了个demo,链接在下面.对此做个 ...
随机推荐
- 【hdu 1043】Eight
[题目链接]:http://acm.hdu.edu.cn/showproblem.php?pid=1043 [题意] 会给你很多组数据; 让你输出这组数据到目标状态的具体步骤; [题解] 从12345 ...
- 模拟select控件功能
直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- Why does MySQL produce so many temporary MYD files?
http://dba.stackexchange.com/questions/30505/why-does-mysql-produce-so-many-temporary-myd-files Data ...
- mariadb-10GTID复制及多源复制
---本文大纲 一.什么是GTID 二.应用场景 三.多线程复制说明 四.实现过程 五.多源复制原理 六.实现过程 ---------------------------------- 一.什么是GI ...
- FFT快速傅里叶变换
FFT太玄幻了,不过我要先膜拜HQM,实在太强了 1.多项式 1)多项式的定义 在数学中,由若干个单项式相加组成的代数式叫做多项式.多项式中的每个单项式叫做多项式的项,这些单项式中的最高项次数,就是这 ...
- 藏妹子之处(excel)
问题描述: 今天CZY又找到了三个妹子,有着收藏爱好的他想要找三个地方将妹子们藏起来,将一片空地抽象成一个R行C列的表格,CZY要选出3个单元格.但要满足如下的两个条件: (1)任意两个单元格都不在同 ...
- [JavaEE] Bootstrapping a JavaEE Application
To bootsrap the application use the following Maven archetype: mvn -DarchetypeGroupId=org.codehaus.m ...
- 【二】注入框架RoboGuice使用:(Your First View Injection)
上一篇我们简单的介绍了一下RoboGuice的使用([一]注入框架RoboGuice使用:(A brief example of what RoboGuice does)),今天我们我看下View的注 ...
- BeautifulSoup中各种html解析器的比較及使用
Beautiful Soup解析器比較 ·Beautiful Soup支持各种html解析器.包含python自带的标准库.还有其它的很多第三方库模块. 当中一个就是lxml parser,至于lxm ...
- CAGradientLayer功能
一.CAGradientLayer介绍 .CAGradientLayer是用于处理渐变色的层结构 .CAGradientLayer的渐变色能够做隐式动画 .大部分情况下.CAGradientLayer ...