如何用CSS画三角形

很多时候页面都需要一个或者多个小型三角形!多数人直接用PS扣个图片预览

下面用CSS简单画几个最终效果如下图

    <div class="border-all-color"></div>
    <div class="border-left-color"></div>
    <div class="border-top-color"></div>
    <div class="border-right-color"></div>
    <div class="border-bottom-color"></div>

.border-all-color {
    margin: 20px auto;
    width: 0;
    height: 0;
    border-top: 40px solid coral;
    border-right: 40px solid lightblue;
    border-bottom: 40px solid lightgreen;
    border-left: 40px solid mediumpurple;
}

.border-left-color,
.border-top-color,
.border-right-color,
.border-bottom-color{
    width: 0;
    height: 0;
    margin: 10px auto;
    border: 20px solid transparent;
}

.border-left-color{
    border-left-color: #9370DB;
}
.border-top-color{
    border-top-color: #FF7F50;
}
.border-right-color{
    border-right-color: #ADD8E6;
}
.border-bottom-color{
     border-top-color: #90EE90;
 }
时间: 2024-09-24 14:16:22

如何用CSS画三角形的相关文章

如何用Graphics类画三角形?

问题描述 请问如何用Graphics类画三角形? 解决方案 解决方案二:用drawLine画3条线解决方案三:importjava.awt.Graphics;importjava.awt.Graphics2D;importjava.awt.Point;importjava.awt.RenderingHints;importjava.awt.geom.GeneralPath;importjavax.swing.JFrame;importjavax.swing.JPanel;importjavax.

纯CSS绘制三角形箭头效果

  最近我想修改一下这个网站,我想在上面放置一个提示框.这是很容易,但我想让提示框上有一个三角形的箭头.可是,一想到这需要使用图片,并且各种颜色,各种方向的箭头要准备无数种,这几乎是一种灾难.幸运的是,MooTools的核心开发着Darren Waddell告诉了我一个非常棒 使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码 复制代码 代码如下: /* create an arrow that points up */ div.arrow-up { widt

如何用PS画出机器人大白

  最近以男子扮大白,向女友告白,而且成功了,让大白再次成为又萌又暖心的代表.不过,扮大白还是需要很坚强的心的,如果能画出大白,然后再写上自己想告白的话,是不是也会提高告白成功的概率呢.现在就让小编教大家如何用PS画出大白的方法. 分类: PS入门教程

如何用CSS控制网页背景

在符合标准的网页设计中如何用CSS控制网页的背景呢?包括背景的颜色,背景的图片等一些问题,在本教程中一次给你讲清楚. ·背景颜色 background-color 我想这个我就不用多做介绍了,颜色代码我想大家都知道的,不是用英文来代替就是用指定的代码来表示的.这个的默认值是transparent(透明色). 例:body{background-color:yellow} H1{background-color:#000000} ·背景图片 background-image 背景图片和背景颜色在H

如何用CSS实现大背景网页设计

自从我发布了大背景网页设计合集之后,我收到了很多电子邮件询问如何用css实现大背景的网页设计.因此我决定和大家分享大背景网站的设计技巧.在此教程中,我会用一些实例来说明如何用一张或者两张图片实现大背景网站的设计. 经常会犯的错误:背景被裁减(查看示例) 查看示例文件,在小于1280分辨率时,是没有问题的.但是如果你的显示器的分辨率大于1280像素,你会看到背景图片以外的部分. 实例1:一张图片(查看示例) 简单的解决问题的方法:将图片边缘的颜色设置成和网页背景色相同的颜色.这里我用Web Des

如何用photoshop画制一幅科幻题材的概念场景气氛图

  如何用photoshop画制一幅科幻题材的概念场景气氛图,从画面的前期构思,画面构图.色彩运用.质感描绘,光影表现等角度进行详细讲解,非常棒的分享,大图更高清,值得借鉴 分类: PS图片处理

CSS技巧分享:如何用css制作横排二级下拉菜单

原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大家来制作横排二级下拉菜单,让我共同来学习吧. 首页我们打看dreamweaver或其它编辑器,创建一个名为nav的导航菜单 <div class="nav"> <ul> <li><a href="#">栏目一</a&

js-如何用CSS或者JS隐藏这样一个标签,&amp;amp;lt;label for=&amp;amp;quot;notebutton&amp;amp;quot;&amp;amp;gt;VJSP批注模式&amp;amp;lt;/label&amp;amp;gt;

问题描述 如何用CSS或者JS隐藏这样一个标签,<label for="notebutton">VJSP批注模式</label> 完整形式 VJSP批注模式 解决方案 没人知道吗,真心求教啊

纯 CSS 实现三角形尖角箭头的实例

上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整的实例,今天刚好要用上,整理了下,写个完整的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti