前端读者 | CSS三角形和饼图

@羯瑞

三角形

.triangle{width:0;height:0;border-width:50px;border-style:solid;border-color:red blue green yellow;}
.triangle_top{width:0;height: 0;border-width:50px;border-style:solid;border-color:red transparent transparent transparent;}
.triangle_right{width:0;height: 0;border-width:50px;border-style:solid;border-color:transparent blue transparent transparent;}
.triangle_bottom{width:0;height: 0;border-width:50px;border-style:solid;border-color:transparent transparent green transparent;}
.triangle_left{width:0;height: 0;border-width:50px;border-style:solid;border-color:transparent transparent transparent yellow;}

要点

  1. 注意各个方向边框值的边框,可以写出不同的等边三角形,等腰三角形,任意三角形...
  2. transparent 透明色,这个得必须,也可以设置成跟底色一样的颜色就可以。
  3. 把四个边设置不同数值,你会发现CSS三角形的规律的

拓展扇形

border-radius: 50px

饼图

思路

  1. 先建一个圆,然后分左右两块。
  2. 左右两块里面在包含一个半圆,然后对其做旋转处理,来匹配对应的百分比,溢出隐藏处理

注意

  1. 因为是左右两块,所以要注意溢出隐藏,以达到最终效果
  2. 注意旋转的中心点
  3. 如果中心区域掏空的话,注意层级问题
  4. 如果百分比<=50%,可以不要右边那块
  5. 百分比跟旋转角度的对应换算(百分比/100*360)

例子

<style>
.pie38{width: 100px;height: 100px;border-radius: 50px;margin:20px;background-color: #ddd;position: relative;display: inline-block;overflow: hidden}
.pie38 .pie_content{line-height: 100px;text-align: center;position: absolute;width: 100px;height: 100px;z-index: 8}
.pie38 .pie_left{position: absolute;top:0;left:0;width: 50px;height: 100px;overflow: hidden;}
.pie38 .pie_left:after{content: '';height: 100px;width:50px;border-right:50px solid red;position:absolute;top:0;left:0;transform: rotate(-137deg);}
</style>

<div class="pie38">
    <div class="pie_content">38%</div>
    <div class="pie_left"></div>
</div>
<style>
.pie88{width: 100px;height: 100px;border-radius: 50px;margin:20px;background-color: #ddd;position: relative;display: inline-block;overflow: hidden;}
.pie88 .pie_content{line-height: 100px;text-align: center;position: absolute;width: 100px;height: 100px;z-index: 8}
.pie88 .pie_left{position: absolute;top:0;left:0;width: 50px;height: 100px;overflow: hidden;background-color: red}
.pie88 .pie_right{position: absolute;top:0;right:0;width: 50px;height: 100px;overflow: hidden;}
.pie88 .pie_right:after{content: '';height: 100px;width:50px;border-left:50px solid red;position:absolute;right:0;top:0;border-radius: 50px;transform: rotate(-137deg);}
</style>

<div class="pie88">
    <div class="pie_content">88%</div>
    <div class="pie_left"></div>
    <div class="pie_right"></div>
</div>

总结

饼图的例子,在测算结果页还是经常会用到的,可以扩展为加载框等其他形式,代码比较简单易懂,相信类似的效果,还有很多方案的,欢迎留言...

原文地址:https://www.cnblogs.com/chenrf/p/10030138.html

时间: 11-28

前端读者 | CSS三角形和饼图的相关文章

html6 border border-width border-style border-color CSS三角形

<!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" xml:lang="en"> <head> <meta h

三道简单的前端HTML/CSS题目

使用CSS为多个网页进行相同风格的布局和外观设置时,为了方便对这些网页进行修改,最好使用( ).http://hovertree.com/shortanswer/bjae/7bd72acca3206862.htm 在HTML中加入<table style=”color:red; font-size:10pt”>,此为( ).http://hovertree.com/shortanswer/bjae/7779739365f3ca74.htm 在HTML语言中,表格中行的开始和结束标记是( )?h

【前端】:CSS

前言: 关于前端的第二篇博客,会写关于css的,内容比较基础.写完这篇博客,会做一个类似美乐乐家具的界面.good luck to me~ 一.css-引用样式 标签上设置style属性: 1 <body> 2 <div style="background-color: #2459a2;height: 48px;">第一层</div> 3 <div style="background-color: #2459a2;height: 48

Bootstrap是快速开发Web应用程序的前端工具包 CSS和HTML的集合

版本主要新特性包括: Responsive embeds New responsive utility classes Copy docs snippets LMVTFY Browser bugs 其他更多: 提交有超过1000条,同时也很多改变的更加完美,下面几个值得注意的变化: The docs have been rearranged and updated to be more specific and easier to develop. The progress bar compon

谷哥的小弟学前端(07)——CSS基础知识(5)

探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 详解Android主流框架不可或缺的基石 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Android多分辨率适配框架(3)- 使用指南 自定义View系列教程00–推翻自己和过往,重学自定义View 自定义View系列教程01–常用工具介绍 自定义View系列教程02–onMeasure源码详尽分析 自定义View

Web前端--Html/Css

总结一下今天学的内容,虽然以前学过,但是再学感觉还是有需要学习的地方. Web前端–Html: 超文本标记语言(HyperText Markup Language) 1.整体骨架 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> </body> </ht

【从0到1学Web前端】CSS定位问题二(float和display的使用)

display 属性规定元素应该生成的框的类型. 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构.对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的. 浏览器支持: 所有主流浏览器都支持 display 属性. 注释:任何版本的 Internet Explorer (包括 IE8)都不支持 "inherit"."inlin

前端之CSS介绍

一.CSS简介 介绍 css我们称呼层叠样式表(英文全称:Cascading Style Sheets).它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.如果html是一个人,那么CSS就相当于衣服,有了它我们可以让HTML样式丰富多彩. 语法 css语法主要由两部分组成:选择器和声明.选择器通常是您需要改变样式的 HTML 元素.每条声明由一个属

python之 前端HTML/CSS基础知识学习笔记

1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head> <title>...</title>

前端学习 -- Css -- 行间距

在CSS并没有为我们提供一个直接设置行间距的方式,我们只能通过设置行高来间接的设置行间距,行高越大行间距越大.使用line-height来设置行高 .行高类似于我们上学单线本,单线本是一行一行,线与线之间的距离就是行高,网页中的文字实际上也是写在一个看不见的线中的,而文字会默认在行高中垂直居中显示.行间距 = 行高 - 字体大小. 通过设置line-height可以间接的设置行高,可以接收的值: 1.直接就收一个大小: 2.可以指定一个百分数,则会相对于字体去计算行高: 3.可以直接传一个数值,