1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框</title>
  7.         <style type="text/css">
  8.             div {
  9.                 width: 200px;
  10.                 height: 200px;
  11.                 line-height: 200px;
  12.                 text-align: center;
  13.                 margin: 200px auto;
  14.                 background-color: red;
  15.             }
  16.             /*圆形
  17.             原理：四个角都是圆角：四个角的取值为50%或为宽和高一样的值（此处即100px） */
  18.  
  19.             .circle {
  20.                 border-radius: 50%;
  21.                 /*border-radius圆角的四个值按顺序取值分别为：左上、右上、右下、左下。*/
  22.             }
  23.             /*半圆
  24.             原理：左上、右上角是圆角，右下、左下角是直角： 左上角、右上角的值为宽和高一样的值。右下角、左下角的值不变（等于0）。另外。由于还要设置高度值为原来高度的一半才是标准的半圆。*/
  25.  
  26.             .semi-circle {
  27.                 border-radius: 200px 200px 0 0;
  28.                 height: 100px;
  29.             }
  30.             /*扇形
  31.             原理：左上角是圆角。其余三个角都是直角：左上角的值为宽和高一样的值，其它三个角的值不变（等于0）。*/
  32.  
  33.             .sector {
  34.                 border-radius: 200px 0 0;
  35.             }
  36.             /*弧形
  37.             原理：两个对角变，另外两个对角不变：比方，左上角、右下角取值为宽和高一样的值。右上角、左下角的值不变（等于0） .加入transform属性可旋转成平躺的弧形，类似人的嘴巴形状，(*^__^*) 嘻嘻……*/
  38.  
  39.             .arc {
  40.                 border-radius: 200px 0;
  41.                 -webkit-transform: rotate(45deg);
  42.                 -ms-transform: rotate(45deg);
  43.                 -o-transform: rotate(45deg);
  44.                 transform: rotate(45deg);
  45.             }
  46.             /*三角形
  47.             原理：设置边框，并把原来div的宽和高的值设置为0，即把原来的矩形压缩成仅仅有边框，但由于设置的边框值比較大（为了保证三角形看起来不会太小或者太细），然后设置每个边框的颜色不同。就能够看出三角形事实上就能够是由边框变换而来的。若仅仅想显示某一块三角形，能够把其它的边框颜色设置为透明，即transparent。*/
  48.  
  49.             .triangle {
  50.                 border: 100px solid green;
  51.                 width: 0;
  52.                 height: 0;
  53.                 border-top-color: yellow;
  54.                 border-right-color: blue;
  55.                 border-bottom-color: pink;
  56.                 border-left-color: orange;
  57.             }
  58.  
  59.             .arrow {
  60.                 background: none;
  61.                 /*为了清除前面div设置的背景颜色*/
  62.                 border: 100px solid red;
  63.                 width: 0;
  64.                 height: 0;
  65.                 border-color: red transparent transparent transparent;
  66.             }
  67.             /*疑问框
  68.             原理：由圆角矩形和一个小三角组成：可结合伪元素、定位实现。*/
  69.             /*圆角矩形*/
  70.  
  71.             .rectangle {
  72.                 width: 200px;
  73.                 height: 100px;
  74.                 line-height: 100px;
  75.                 border-radius: 15px;
  76.                 position: relative;
  77.             }
  78.             /*小三角*/
  79.  
  80.             .rectangle::before {
  81.                 content: "";
  82.                 width: 0;
  83.                 height: 0;
  84.                 border: 15px solid red;
  85.                 border-color: red transparent transparent transparent;
  86.                 position: absolute;
  87.                 bottom: -30px;
  88.                 left: 40px;
  89.             }
  90.         </style>
  91.     </head>
  92.  
  93.     <body>
  94.         <div>矩形</div>
  95.         <div class="circle">圆形</div>
  96.         <div class="semi-circle">半圆</div>
  97.         <div class="sector">扇形</div>
  98.         <div class="arc">弧形</div>
  99.         <div class="triangle"></div>
  100.         <div class="arrow"></div>
  101.         <div class="rectangle">疑问框</div>
  102.     </body>
  103.  
  104. </html>

CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框的更多相关文章

  1. CSS通过边框border-style来写小三角

    <!DOCTYPE html> /*直接复制代码即可在浏览器验证*/ <html> <head lang="en"> <meta char ...

  2. 【CSS】CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框

    在网页中,常常会用到各种Icon,假设老是麻烦设计狮画出来不免有些不好意思,所以有时候我们也能够用CSS写出各种简单的形状.一来能够减轻他们的负担,二来也能够使用CSS替代图片.提高载入速度. 在网页 ...

  3. css实现小三角（原理）

    效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...

  4. CSS创建三角形（小三角）的几种方法

    你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...

  5. css制作小三角

    视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...

  6. css直接写出小三角

    在开发移动端项目时,总是遇到很多小三角,之前一直用图片,感觉好麻烦,今天尝试了直接用CSS写出小三角!先看看如何写出各种小三角! /*箭头向上*/ .arrow-up { ; ; border-lef ...

  7. CSS的小三角

    上三角▲ width: 0; height: 0; line-height: 0; font-size: 0; border-width: 10px; border-style: solid; bor ...

  8. css border制作小三角形状及气泡框(兼容IE6)

    先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...

  9. 一个常见下拉菜单的样式：一体化小三角（纯css手写解决）

    类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用bord ...

随机推荐

  1. node的源码安装

    Node.js 安装配置 本章节我们将向大家介绍在 Windows 和 Linux 上安装 Node.js 的方法. 本安装教程以 Node.js v4.4.3 LTS(长期支持版本)版本为例. No ...

  2. 【JZOJ5093】【GDSOI2017第四轮模拟day3】字符串匹配 哈希

    题面 对于一个字符集大小为C的字符串P,我们可以将任意两种字符在P中的位置进行互换,例如P=abcba,我们交换a,b就变为bacab,交换a,d就变为dbcbd,交换可以进行任意次.若交换后P变为了 ...

  3. Springboot 创建的maven获取resource资源下的文件的两种方式

    Springboot 创建的maven项目 打包后获取resource下的资源文件的两种方式: 资源目录: resources/config/wordFileXml/wordFileRecord.xm ...

  4. ie8或9下ajax跨域问题

    ie8或9下ajax跨域支持,添加如下代码 <!--[if (IE 8)|(IE 9)]><script src="https://cdn.bootcss.com/jque ...

  5. Redis → 下载安装及启动

    一.Window 下安装 下载地址:https://github.com/MSOpenTech/redis/releases Redis 支持 32 位和 64 位.这个需要根据你系统平台的实际情况选 ...

  6. pl/sql基础知识—定义并使用变量

    n  介绍 在编写pl/sql程序是,可以定义变量和常量:在pl/sql程序中包括有: ①标量类型(scalar) ②复合类型(composite) ③参照类型(reference) ④lob(lar ...

  7. 比较全面的一个PHP缓存类解析

    转自:http://www.blhere.com/1164.html 一.引论 PHP,一门最近几年兴起的web设计脚本语言,由于它的强大和可伸缩性,近几年来得到长足的发展,php相比传统的asp网站 ...

  8. 每天一个linux命令(1): which命令

    0.学习时间: 2014-05-15 which命令用来在PATH指定的路径中查找特定的文件, 并返回第一个找到的结果. 1. 命令格式:  which 文件名 2.命令功能 一般使用which命令来 ...

  9. Python发送邮件1（带附件的）

    普通的发邮件(不使用类)

  10. 2019-8-31-dotnet-控制台-Hangfire-后台定时任务

    title author date CreateTime categories dotnet 控制台 Hangfire 后台定时任务 lindexi 2019-08-31 16:55:58 +0800 ...