直接上代码！

<!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样式写选择框右侧小三角的更多相关文章

  1. 正确分析结构使用正确的HTML标签。CSS样式写一起。

    在内容中 一行内容包括三张图片,每张图片下面有标题和具体介绍,那么可以使用: 分析和解决如下步骤: 1,一行三块,先向左浮动成为一行float:left. 2,把他们的宽度平分三份,33.3%.三份都 ...

  2. WebStorm 配置微信小程序开发 用html样式打开wxml 用css样式打开wxss 配置微信小程序提醒

    1.点开preferences 2.搜索找到“File Types” 3.找到"HTML",点击“+”按钮,添加“*.wxml”然后“apply” 4.和3一样,再找到 ‘casc ...

  3. CSS样式写在JSP代码中的几种方法

    1.行内样式. 可以直接把css代码写在现有的HTML标签元素的开始标签里面,并且css样式代码要写在style=" "双引号中才可以, 如: <p style=" ...

  4. 【css2、css3】css改变select选择框的样式

    效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  5. 移动web之用CSS样式写如苹果手机的开关键

    话说这个问题纠结了近一个小时,为什么呢?看看就知道了. 在公司的商旅Web移动版本项目上有这么一个交互,需要模仿iphone自带的开关,好吧,肯定没什么问题. Tip:请使用Chrome查看以下案例 ...

  6. css样式写一个三角形

    <style> .test{ border-color:transparent #abcdef transparent transparent; border-style:solid; b ...

  7. 纯CSS样式写刘海屏效果

    1. 效果: 2. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  8. CSS样式实现两个图片平分三角

    <div class='pageOption'> <a href='#' class='option' > <img src='http://imgsrc.hubbles ...

  9. css自定义 range radio select的样式滑轮，按钮，选择框

    写在前面: 之前踩坑css的时候,遇到滑轮,按钮,选择框这类型的东西,为了页面效果,总是需要自定义他们的样式,而不使用他们的默认样式.当时写的时候,我也是蛮头疼的,弄了个demo,链接在下面.对此做个 ...

随机推荐

  1. Android NumberProgressBar：动态移动显示百分比进度的进度条

     Android NumberProgressBar:动态移动显示百分比进度的进度条 NumberProgressBar是github上一个开源项目,其项目主页是:https://github.c ...

  2. github & Front-end JavaScript frameworks

    github & Front-end JavaScript frameworks https://github.com/collections/front-end-javascript-fra ...

  3. [luoguP1220] 关路灯（DP）

    传送门 如果去关某一个灯,那么途中经过的灯都能关闭,那么就是连续一段区间,区间DP. f[i][j][0] 表示关完 i, j 这个区间且在 i 这个位置 f[i][j][1] 表示关完 i, j 这 ...

  4. jQuery对象是怎么创建的

    一.jQuery源码 在jQuery中,$是jQuery的别名,执行“$()”就是执行“jQuery()”,执行“$()”返回的是一个jQuery对象,在源码中,它是这样定义的: ... var jQ ...

  5. [ZJOI2009]硬币游戏

    Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 920  Solved: 406[Submit][Status][Discuss] Descriptio ...

  6. Switch Game

    Problem Description There are many lamps in a line. All of them are off at first. A series of operat ...

  7. Ubuntu 16.04添加启动图标到Dash Home中

    一.添加图标: 图标信息在以下两处地方: /usr/share/applications ~/.local/share/applications(用户独立配置存放地方,是个隐藏文件夹) 图标信息文件以 ...

  8. 25、Java并发性和多线程-阻塞队列

    以下内容转自http://ifeve.com/blocking-queues/: 阻塞队列与普通队列的区别在于,当队列是空的时,从队列中获取元素的操作将会被阻塞,或者当队列是满时,往队列里添加元素的操 ...

  9. 条款39: 避免 "向下转换" 继承层次

    基类指针不能调用派生类的独有的成员,即使基类指针指向派生类对象,因为编译器是根据指针的静态类型来确定调用对象在内存中占据的空间的.此时可以使用static_cast来转换,但不要这么做,因为向下转换难 ...

  10. Android studio 解决setText中文乱码问题

    我在用Android Studio编译器的时候,总会遇到非常多乱码的问题.第一个乱码问题是在Layout文件中面定义了EditText.在代码中须要将获取到的内容填充到EditText里面,这时候假设 ...