如何用CSS做三角形图片

.box1 {
    height:0;
    width:0;
    font-size:0;  /* IE兼容 */
    line-height:0px;  /* IE兼容 */
    border-color:#FF9600 transparent transparent transparent;
    border-style:solid dashed dashed dashed;  /* dashed是为IE6兼容 */
    border-width:55px;
}
.box3 {
    height:100px;
    width:100px;
    font-size:0;  /* IE兼容 */
    line-height:0px;  /* IE兼容 */
    border-color: red blue #FF9600 black;
    border-style: solid solid solid solid;  /* dashed是为IE6兼容 */
    border-width:30px;
}
<div id="box1" class="box1"></div><div class="box3"></div>

下面这张图片就是id等于box1的div的图片

下面这张图片就是id等于box3的div的图片

相关文章:http://www.nixiaofeng.com/263.html

相关内容:

Leave a comment

16 Comments.

  1. 不错的博客,过来看看,欢迎到我们的论坛交流

    366源码论坛下载中心
    更多精品,请访问:http://366ym.com
    精品源码,精品教程,资源集中地!我们只收集精品!

  2. 嘛~现在找个真技术博客真的挺难的。

    希望能和博主交个朋友,交换连接。 我先把博主链接加了哦。

    嘛~我是搞网络编程开发的,主要为FLASH网游.

  3. 每次来都会发现新的小知识点, 加油啊,共同努力

  4. 哇塞,太强大了吧,这都能做?

  5. 支持下,不错!新年快乐!

  6. :wink: 圆角就常见,三角的第一次见

    元旦快乐

  7. 元旦快乐啊,祝在新的一年里,技术越做越精深,网站越做越红火!

  8. 文章不错,继续!

  9. 购网网站比较喜欢三角的吧

  10. 祝在新的一年里,技术越做越精深

  11. 晚来的新年祝福:新年快乐!!

  12. 很好很强大啊….我觉得应该加个留言板.不然有时都不知道在哪里落脚呢..哈哈

  13. 哈哈,强大,我博客后台的CSS我都看不懂呢

  14. 三角形挺不错的,接下来就到CSS3和HTML5的年代咯。

发表评论

您的电子邮箱不会被公开。 标记为 * 的区域必须填写

*


您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

有人回复时邮件通知我