经常看到这样的尖角,以前不懂,以为都是用图片做出来的,后来惊奇的发现,原来很多都是用CSS做出来的,既美观又节省资源,真是两全其美啊!

那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码:

<div class="arrow"></div>
.arrow {
width:;
height:;
font-size:;
border:solid 10px #000;
}

这儿,我们可以得到一个黑色的正方形,其实这是边框组成的,因为div的宽度和高度都是0,。那么,我们具体来看看,div宽度和高度都是0时,它的上下左右四边框都是怎样的,下面我们把边框的各边颜色分别设置为不同颜色:

.arrow {
width:;
height:;
font-size:;
border:solid 10px;
border-color:#f00 #0f0 #00f #000;
}

我们发现,原来当div的宽度和高度都是0的时候,它的整个边框是由四个三角形组成的,每一边为一个三角形,那么我们就可以利用这个特点,来做可爱的小尖角了。我们只要把不需要的三边的边框(三角形)的颜色设置为与背景相同即可,这样就只能看到你想要的那个三角形了,然后再利用定位调整一下位置就可以了。具体代码如下所示:

<div class="send">
<div class="arrow">
</div>
</div>
body {
background:#4D4948;
} .send {
position:relative;
width:150px;
height:35px;
background:#F8C301;
border-radius:5px; /* 圆角 */
margin:30px auto 0;
} .send .arrow {
position:absolute;
top:5px;
right:-16px; /* 圆角的位置需要细心调试哦 */
width:;
height:;
font-size:;
border:solid 8px;
border-color:#4D4948 #4D4948 #4D4948 #F8C301;
}

大功告成,效果如下:

文章转载:http://www.w3clog.com/436.html

用CSS实现文本框尖角的更多相关文章

  1. css中文本框与按钮对不齐解决方案

    我们先对对input标记设定样式,代码如下: html 代码 <form> <input type=”text” name=”text1” id=”text1” /> < ...

  2. css控制文本框的只读属性的方法

    css 封装整个只读文本框的属性: .TextBoxReadOnly{ border:1px solid #C0C0C0; text-align:left; background-color:#D3D ...

  3. 百度前端笔试题目--css 实现一个带尖角的正方形

    今天在牛客网上看到这道题,发现自己并不会,看来自己css都没怎么学习,也不怎么会用.看了下答案,不是很明白,也在网上搜集了一些资料和解法,感觉一些同学博客上也写了一些解法和拓展,所以就在这里借鉴一下咯 ...

  4. css装饰文本框input

    在web程序前端页面中,<input>恐怕是用的最多的html元素了,各个需要录入信息的场合都会用到它,一般都会用css来修饰一下使得它更好看. 原始的不加修饰的文本框像下面,有些单调,页 ...

  5. css实现文本框和下拉框结合的案例

    html 代码部分 <div id="list-name-input" class="list-name-input"> <select ty ...

  6. 通过CSS使文本框中输入的小写字母变大写字母

    在style.css文件中写 .dataField input{text-transform:uppercase;} .dataField textarea {text-transform:upper ...

  7. css三角形文本框

    <style type="text/css"> .triangle{/* 三角形图片位置 */ background-image: url(img/traintop.p ...

  8. (转载) css实现小三角(尖角)

    在各种网站里面,我们会经常看到类似于这样的尖角:(示例:新浪微博) 它实现的方式有多种,哪种才是最简单的?哪种才是最优秀的?首先我声明一下,我还不清楚这个东西具体叫什么名字(哪位知道还望告知),暂且叫 ...

  9. css细节:尖角处理

    在各种网站里面,我们会经常看到类似于这样的尖角:(示例:新浪微博) 它实现的方式有多种,哪种才是最简单的?哪种才是最优秀的?首先我声明一下,我还不清楚这个东西具体叫什么名字(哪位知道还望告知),暂且叫 ...

随机推荐

  1. iOS基础 - CALayer

    一.CALayer简介 Core Animation是跨平台的,支持iOS环境和Mac OS X环境 凡是支持跨平台的框架,都不能直接使用UIKit框架,因为UIKit框架只能应用在iOS而不能用于M ...

  2. Azure的两种关系型数据库服务:SQL Azure与SQL Server VM的不同

    Azure的两种关系型数据库服务:SQL Azure与SQL Server VM的不同 <Windows Azure Platform 系列文章目录> 如果熟悉Windows Azure平 ...

  3. vim简单的实用总结

    vim简单的实用总结 介绍vim常用的四种模式:一般模式,编辑模式,指令列命令模式与可视模式.一,一般模式   用vim filename打开文件后直接进入的就是一般模式,在这个模式下可以用hjkl移 ...

  4. Clob类型转换成String类型

    oracle中表结构如下: create table GRID_RESOURCE ( ID VARCHAR2(50), CNNAME VARCHAR2(50), TYPE VARCHAR2(50), ...

  5. Elmah错误日志工具

    Elmah错误日志工具 Exception 对于异常的处理,以前基本就是跳转到一个自定义的错误页面,觉得这样不错挺友好的.同时还是需要记录下来这些异常,才能进一步的进行修改. 怎么去记录这些错误信息呢 ...

  6. jquery以及js实现option左移右移

    <table cellspacing="1" width="350px" align="center"> <tr> ...

  7. HashMap源码剖析

    HashMap源码剖析 无论是在平时的练习还是项目当中,HashMap用的是非常的广,真可谓无处不在.平时用的时候只知道HashMap是用来存储键值对的,却不知道它的底层是如何实现的. 一.HashM ...

  8. 快速构建C++项目工具Scons,结合Editplus搭建开发环境

    Windows下C++开发工具用的最多的非VS莫属了(当然也有很多比如eclipse,Qt等等),便捷的项目构建向导,再加上强大的VC助手,使得开发和调试得心应手.并不是说vc就没有缺点,相反缺点也不 ...

  9. TOGAF架构内容框架之内容元模型(下)

    TOGAF架构内容框架之内容元模型(下) 2.2 治理扩展(Governance Extensions) 治理扩展元模型内容 治理扩展部分的意图在于引入额外的,并且与支持运营治理的目标和业务服务相关的 ...

  10. [置顶] 遵循Java EE标准体系的开源GIS服务平台之二:平台部署

    传送门 ☞ 系统架构设计 ☞ 转载请注明 ☞ http://blog.csdn.net/leverage_1229 传送门 ☞ GoF23种设计模式 ☞ 转载请注明 ☞ http://blog.csd ...