直接上代码！

<!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. 小数化分数的O(log2n)解法

    具体约束: 给定一个小数x,x满足0<=x<1,且保证给定的x保留了18位小数 输出一个分数,使得分母不超过1e9,分子分母互质,且在满足这些条件的情况下最接近x 了解一下法雷数列和ste ...

  2. fzu2143 Board Game

    Board Game Accept: 54    Submit: 151Time Limit: 1000 mSec    Memory Limit : 32768 KB  Problem Descri ...

  3. 小朋友的数字(codevs 3293)

    题目描述 Description 有n个小朋友排成一列.每个小朋友手上都有一个数字,这个数字可正可负.规定每个小朋友的特征值等于排在他前面(包括他本人)的小朋友中连续若干个(最少有一个)小朋友手上的数 ...

  4. nyoj_278_排队_201403282135

    排队 时间限制:3000 ms  |  内存限制:65535 KB 难度:1   描述 周末了,软件ACM的队员准备玩玩游戏,娱乐一下,CY想了一个好主意,所有队员站成一个圈,从1开始报数,凡是报出指 ...

  5. HDU A/B 扩展欧几里得

    Problem Description 要求(A/B)%9973,但由于A很大,我们只给出n(n=A%9973)(我们给定的A必能被B整除,且gcd(B,9973) = 1).   Input 数据的 ...

  6. Manthan, Codefest 16 F

    寻找树上最大权值和的两条不相交的路径. 树形DP题.挺难的,对于我…… 定义三个变量ma[MAXN], t[MAXN], sum[MAXN] 其中,ma[i]代表i子树中,最长的路径和 t[i]代表i ...

  7. 转:Redis 缓存策略

    转:http://api.crap.cn/index.do#/web/article/detail/web/ARTICLE/7754a002-6400-442d-8dc8-e76e72d948ac 目 ...

  8. FFmpeg总结（三）AV系列结构体之AVCodecContext

    位置: 描写叙述:主要扩展API的结构体 New fields can be added to the end with minor version bumps. Removal, reorderin ...

  9. Codeforces Round #263 (Div. 1)-A,B,C

    A: 这道题目还是非常easy的,做过非常多遍了.相似于分割木板的问题. 把全部的数放在一个优先队列里,弹出两个最大的,然后合并,把结果放进去.依次进行. #include <iostream& ...

  10. jsoncpp的生成和使用

    从github下载jsoncpp-master 在执行\jsoncpp-master\makefiles\msvc2010文件夹下jsoncpp.sln 会有3个项目 执行lib_json项目生成li ...