<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框</title>

        <style type="text/css">

            div {

                width: 200px;

                height: 200px;

                line-height: 200px;

                text-align: center;

                margin: 200px auto;

                background-color: red;

            }

            /*圆形

            原理：四个角都是圆角：四个角的取值为50%或为宽和高一样的值（此处即100px） */

            .circle {

                border-radius: 50%;

                /*border-radius圆角的四个值按顺序取值分别为：左上、右上、右下、左下。*/

            }

            /*半圆

            原理：左上、右上角是圆角，右下、左下角是直角： 左上角、右上角的值为宽和高一样的值。右下角、左下角的值不变（等于0）。另外。由于还要设置高度值为原来高度的一半才是标准的半圆。*/

            .semi-circle {

                border-radius: 200px 200px 0 0;

                height: 100px;

            }

            /*扇形

            原理：左上角是圆角。其余三个角都是直角：左上角的值为宽和高一样的值，其它三个角的值不变（等于0）。*/

            .sector {

                border-radius: 200px 0 0;

            }

            /*弧形

            原理：两个对角变，另外两个对角不变：比方，左上角、右下角取值为宽和高一样的值。右上角、左下角的值不变（等于0） .加入transform属性可旋转成平躺的弧形，类似人的嘴巴形状，(*^__^*) 嘻嘻……*/

            .arc {

                border-radius: 200px 0;

                -webkit-transform: rotate(45deg);

                -ms-transform: rotate(45deg);

                -o-transform: rotate(45deg);

                transform: rotate(45deg);

            }

            /*三角形

            原理：设置边框，并把原来div的宽和高的值设置为0，即把原来的矩形压缩成仅仅有边框，但由于设置的边框值比較大（为了保证三角形看起来不会太小或者太细），然后设置每个边框的颜色不同。就能够看出三角形事实上就能够是由边框变换而来的。若仅仅想显示某一块三角形，能够把其它的边框颜色设置为透明，即transparent。*/

            .triangle {

                border: 100px solid green;

                width: 0;

                height: 0;

                border-top-color: yellow;

                border-right-color: blue;

                border-bottom-color: pink;

                border-left-color: orange;

            }

            .arrow {

                background: none;

                /*为了清除前面div设置的背景颜色*/

                border: 100px solid red;

                width: 0;

                height: 0;

                border-color: red transparent transparent transparent;

            }

            /*疑问框

            原理：由圆角矩形和一个小三角组成：可结合伪元素、定位实现。*/

            /*圆角矩形*/

            .rectangle {

                width: 200px;

                height: 100px;

                line-height: 100px;

                border-radius: 15px;

                position: relative;

            }

            /*小三角*/

            .rectangle::before {

                content: "";

                width: 0;

                height: 0;

                border: 15px solid red;

                border-color: red transparent transparent transparent;

                position: absolute;

                bottom: -30px;

                left: 40px;

            }

        </style>

    </head>

    <body>

        <div>矩形</div>

        <div class="circle">圆形</div>

        <div class="semi-circle">半圆</div>

        <div class="sector">扇形</div>

        <div class="arc">弧形</div>

        <div class="triangle"></div>

        <div class="arrow"></div>

        <div class="rectangle">疑问框</div>

    </body>

</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. 洛谷3128 [USACO15DEC]最大流Max Flow——树上差分

    题目:https://www.luogu.org/problemnew/show/P3128 树上差分.用离线lca,邻接表存好方便. #include<iostream> #includ ...

  2. Ubuntu下安装go语言

    参考:http://golang.org/doc/install/source 1. 下载go源代码 sudo apt-get install mercurial hg clone -u releas ...

  3. JS---案例：拖曳对话框

    案例:拖曳对话框 ps: 实际没有要拖曳登录框的需求,只是演示拖曳的这个效果 1. 获取超链接,注册点击事件,显示登陆框和遮挡层 2. 获取关闭,注册点击事件,隐藏登陆框和遮挡层 3. 按下鼠标,移动 ...

  4. 设置程序PrivatePath，配置引用程序集的路径（分离exe和dll）

    原文:设置程序PrivatePath,配置引用程序集的路径(分离exe和dll) 有时候我们想让程序的exe文件和dll文件分开在不同目录,这时候可以有3种方法 1.在app.config中配置 &l ...

  5. OWIN启动类检测

    每个OWIN应用程序都有一个启动类,可以在这个类里为应用程序管道指定组件.有不同的方式可以将启动类与运行时关联起来,这依赖于选择的托管模型(OwinHost,IIS,IIS-Express).本教程中 ...

  6. 【Vue】详解组件的基础与高级用法

    Vue.js 最核心的功能就是组件(Component),从组件的构建.注册到组件间通信,Vue 2.x 提供了更多方式,让我们更灵活地使用组件来实现不同需求. 一.构建组件 1.1 组件基础 一个组 ...

  7. day38 17-Spring的Bean的属性注入：注解方式

    这个类已经可以由Spring控制反转了,那么属性呢?属性分为普通属性和对象属性两部分. JSR是一个组织,和W3C一样是定义一些标准的.它里面也定义了一歌注解,Spring对这个注解也是支持的.其实这 ...

  8. oracle国家字符集

    国家字符集是一个备用字符集,利用此字符集可以在没有Unicode 数据库字符集的数据库中存储 Unicode 字符. 选择国家字符集的其它原因如下: 对于频繁的字符处理操作,不同的字符编码方案可能更为 ...

  9. CentOS下重启uwsgi

    使用Django开发项目,每次修改内容无法刷新,重启nginx也无效,每次都重启主机, 网上搜索很多资料,发现可以重启uwsgi来解决问题,但是发现uwsgi重启每个人都不一样,很多人写了脚本重启 我 ...

  10. com.alibaba.dubbo.remoting.TimeoutException

    maven项目 update clean install 重启 服务消费者