美文网首页
CSS画三角形的一种方法

CSS画三角形的一种方法

作者: 觉不够睡的早班车 | 来源:发表于2016-05-07 13:26 被阅读27次

先来看一个例子:

<!DOCTYPE HTML>
<html>
<head>         
<meta charset="UTF-8">
<title>例子</title>
<style>
.fang{
width:40px;
height:40px;
background-color:red;
 }
.triangle{
    width: 0;
    height: 0;
    border-top:    40px solid #000000;
    border-right:  40px solid #ff0000;
    border-left:   40px solid #ff0000;
    border-bottom: 40px solid #000000;
}
</style>
</head>
<body>
<div class="fang"></div>
<div class="triangle"></div>
</body>
</html>         

效果图:


所以只要把对应方向的颜色改成 “transparent” 就可以了,即透明。
但IE6不支持透明属性,想要画出三角形,只能设置相应方向颜色和背景色相同。

例子:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>例子</title>
<style>
.triangle{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid #ff0000;
border-bottom: 40px solid transparent;
}
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>

效果:


相关文章

  • CSS画三角形、圆形、椭圆形总结

    CSS画正方形长方形很简单,本文就不说了。 一、三角形 1、CSS画等腰三角形 2、画直角三角形: 二、画圆形 注...

  • css 实现三角形箭头

    插入DOM 使用伪类 参考:用纯CSS实现的箭头CSS画三角形原理css整理 -- 右箭头,上下箭头,三角形 这个...

  • 【转】用CSS画各种形状(一)

    本篇是以下两篇文章的转载和总结 纯CSS画基本形状用CSS画三角形,普通版,文艺小阴影版~ 1、画方形 2、画正圆...

  • css画三角形

    最近看到一个css画三角形的方法,非常有趣。 直接贴代码 感兴趣的同学可以深入探究原理,效果如下图:

  • css3开发商务滑动垂直侧边栏

    知识点:盒子模型与css样式,CSS3选择器、CSS3伪元素画三角形,DIV+CSS布局基础,html性能优化与布...

  • 【CSS】画三角形

    用CSS画三角形,利用border属性,把一个边设置成看到的样式,其他两边或三边用transparent方法变成透...

  • CSS画三角形的一种方法

    先来看一个例子: 效果图: 所以只要把对应方向的颜色改成 “transparent” 就可以了,即透明。但IE6不...

  • 项目中常用到的代码

    css 字体选中样式 三角形 css选择器 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。"CSS...

  • css画三角形

    我之前还是真没有用过 css画三角形,用的切图。但是切图要请求网络上的资源。可能不划算所以就要实现 css画各种三...

  • CSS画三角形的简单做法

    记录一下今天看uni-app学到的小知识,用css边框画各种三角形。 先上效果图: html 如下: css 如下...

网友评论

      本文标题:CSS画三角形的一种方法

      本文链接:https://www.haomeiwen.com/subject/oqzjrttx.html