当前位置：移动技术网 > IT编程>网页制作>CSS > 小三角的做法与使用

小三角的做法与使用

2017年12月12日 | 移动技术网IT编程 | 我要评论

用DIV+CSS可以作出很多不同形状的角形；以下我只写了几个；CSS没有优化；是为了让大家看得更清一些；

以下是一些小三角的形状：

这是第一个小三角的写法：

#com_a{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;border-bottom:10px solid #FFFFCC;}

以下是一些小三角；可以举一反三；做出更多的；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>www.zishu.cn</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<style> 
/*zishu.cn*/ 
*{ margin:0; padding:0; font-size:12px; font-family:Verdana, "宋体", Arial; line-height:1.8; list-style:none;} 
#info,#nav{ margin:50px; border:1px dashed #FF3300; background:#FFFFCC; padding:50px;} 
#info div{background:#FF0000; width:0px; height:0px; overflow:hidden; margin-bottom:10px;} 
/*一些三角的写法*/ 
#com_a{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;border-bottom:10px solid #FFFFCC;} 
#com_b{ border-top:10px solid #FFFFCC;border-right:10px solid #FF3300;border-bottom:10px solid #FFFFCC;} 
#com_c{ border-top:10px solid #FFFFCC;border-right:10px solid #FF3300;border-bottom:10px solid #FFFFCC;border-left:10px solid #FF3300;} 
#com_d{ border-top:10px solid #FF3300;border-right:10px solid #FFFFCC;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;} 
#com_e{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;} 
#com_f{ border-top:10px solid #FF3300;border-right:10px solid #FFFFCC;border-left:10px solid #FFFFCC;} 
#com_g{ border-right:10px solid #FFFFCC;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;} 
#com_h{ border-top:10px solid #FF3300;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;} 
#com_i{ border-top:10px solid #FF3300;border-right:10px solid #FF3300;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;} 
</style> 
</head> 
<body> 
<div id="info"> 
<h1>一些三角形的写法</h1> 
  <div id="com_a"></div> 
  <div id="com_b"></div> 
  <div id="com_f"></div> 
  <div id="com_g"></div> 
  <div id="com_c"></div> 
  <div id="com_d"></div> 
  <div id="com_e"></div> 
  <div id="com_h"></div> 
  <div id="com_i"></div> 
</div> 
</body> 
</html>

[Ctrl+A 全选注:]

以下是一个应用的实例：

[Ctrl+A 全选注:]

在IE6和IE7还有FIREFOX还有OPERA都测试过！IE6更低的版本没有测试！

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

利用transform实现一个纯CSS弹出菜单的示例代码

前言在制作顶部菜单的时候，都会要求制作弹出的二级菜单，早先的做法是用jquery的来控制二级菜单的显示和过渡动画，但利用css3中的transform属性后，这... [阅读全文]
Android手势滑动实现

详细的博客介绍： https://www.gcssloop.com/customview/gestrued... [阅读全文]
CSS基础及用法

前言对于一个网页来说，css是网页的门面，对于一个前端初学者来说，css更是他们必经之路，通过这篇文章我就来带大... [阅读全文]
荐 2020前端面试笔试题及答案

更多面试题已在小程序更新WX搜索【MST题库】小程序查看css的重绘与回流重绘：当节点需要更改外观而不会影响布... [阅读全文]
CSS实现loading小动画

纯css实现loading动画相信各位上网过程中最不希望看到的就是加载中不停转圈圈的画面了那么他是怎么实现的呢？... [阅读全文]
CSS3 - 文本超出隐藏显示省略号（单行 / 多行）

单行如果实现单行文本的溢出显示省略号（…）应该都知道用 text-overflow:ellipsis 属性来，当... [阅读全文]
css counter计数器与content总结

content属性早在css2.1的时候就被引入了，可以使用:before以及:after伪元素生成内容。content属性现在已经得到大部分浏览器的支持，关于... [阅读全文]
前端学习笔记（6）之css盒模型的细节知识点汇总

css盒模型细节知识点总结只要元素有浮动，尽量保证浮动元素都在一个父元素里面。高度塌陷：子元素浮动，而父元素未设... [阅读全文]
前端学习笔记（4）之css背景属性合集

背景模块背景颜色background-color背景图：background-image：url（）；背景图平铺... [阅读全文]
PC端页面适配到移动端的问题(自动缩放PC端页面)

有时候在移动端开发页面的时候会发现因为移动端分辨率大导致页面视图被缩放的很小,这个时候就需要适配了话不多说直接贴... [阅读全文]

网友评论


验证码：

小三角的做法与使用

2017年12月12日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论