CSS实现图形效果
CSS实现图形效果
CSS实现正方形、长方形、圆形、半圆、椭圆、三角形、平行四边形、菱形、梯形、六角星、五角星、心形、消息框。
正方形
<section>
<div id="square"></div>
</section>
<style type="text/css">
#square{
width: 100px;
height: 100px;
background: #4C98F7;
}
</style>
长方形
<section>
<div id="rectangle"></div>
</section>
<style type="text/css">
#rectangle{
width: 200px;
height: 100px;
background: #4C98F7;
}
</style>
圆形
<section>
<div id="circle"></div>
</section>
<style type="text/css">
#circle{
width: 100px;
height: 100px;
background: #4C98F7;
border-radius: 50%;
}
</style>
半圆
<section>
<div id="semicircle"></div>
</section>
<style type="text/css">
#semicircle{
width: 100px;
height: 50px;
background: #4C98F7;
border-radius: 100px 100px 0 0;
}
</style>
椭圆
<section>
<div id="oval"></div>
</section>
<style type="text/css">
#oval{
width: 100px;
height: 50px;
background: #4C98F7;
border-radius: 100px / 50px;
}
</style>
三角形
<section>
<div id="regular-triangle"></div>
</section>
<style type="text/css">
#regular-triangle{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #4C98F7;
}
</style>
<section>
<div id="corner-triangle"></div>
</section>
<style type="text/css">
#corner-triangle{
width: 0;
height: 0;
border-top: 100px solid #4C98F7;
border-right: 100px solid transparent;
}
</style>
平行四边形
<section>
<div id="parallelogram"></div>
</section>
<style type="text/css">
#parallelogram{
margin: 0 15px;
width: 200px;
height: 100px;
transform: skew(-20deg);
background: #4C98F7;
}
</style>
菱形
<section>
<div id="diamond"></div>
</section>
<style type="text/css">
#diamond {
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: #4C98F7;
position: relative;
top: -100px;
}
#diamond:after {
content: "";
position: absolute;
left: -100px;
top: 100px;
width: 0;
height: 0;
border: 100px solid transparent;
border-top-color: #4C98F7;
}
</style>
六角星
<section>
<div id="hexagons"></div>
</section>
<style type="text/css">
#hexagons {
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: #4C98F7;
position: relative;
top: -100px;
}
#diamond:after {
content: "";
position: absolute;
left: -100px;
top: 100px;
width: 0;
height: 0;
border: 100px solid transparent;
border-top-color: #4C98F7;
}
</style>
五角星
<section>
<div id="five-pointed-star"></div>
</section>
<style type="text/css">
#five-pointed-star {
margin: 100px 0 50px 0;
position: relative;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #4C98F7;
border-left: 100px solid transparent;
transform: rotate(35deg);
}
#five-pointed-star:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
border-bottom: 80px solid #4C98F7;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
transform: rotate(-35deg);
}
#five-pointed-star:after {
content: "";
position: absolute;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #4C98F7;
border-left: 100px solid transparent;
transform: rotate(-70deg);
}
</style>
心形
<section>
<div id="five-pointed-star"></div>
</section>
<style type="text/css">
#five-pointed-star {
margin: 100px 0 50px 0;
position: relative;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #4C98F7;
border-left: 100px solid transparent;
transform: rotate(35deg);
}
#five-pointed-star:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
border-bottom: 80px solid #4C98F7;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
transform: rotate(-35deg);
}
#five-pointed-star:after {
content: "";
position: absolute;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #4C98F7;
border-left: 100px solid transparent;
transform: rotate(-70deg);
}
</style>
消息框
<section>
<div id="message-box"></div>
</section>
<style type="text/css">
#message-box {
margin: 0 20px;
width: 120px;
height: 80px;
background: #4C98F7;
position: relative;
border-radius: 10px;
}
#message-box:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid #4C98F7;
border-bottom: 13px solid transparent;
}
</style>
示例
<!DOCTYPE html>
<html>
<head>
<title>CSS实现图形效果</title>
<style type="text/css">
section{
margin: 10px 0;
}
#square{
width: 100px;
height: 100px;
background: #4C98F7;
}
#rectangle{
width: 200px;
height: 100px;
background: #4C98F7;
}
#circle{
width: 100px;
height: 100px;
background: #4C98F7;
border-radius: 50%;
}
#semicircle{
width: 100px;
height: 50px;
background: #4C98F7;
border-radius: 100px 100px 0 0;
}
#semicircle{
width: 100px;
height: 50px;
background: #4C98F7;
border-radius: 100px 100px 0 0;
}
#oval{
width: 100px;
height: 50px;
background: #4C98F7;
border-radius: 100px / 50px;
}
#regular-triangle{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #4C98F7;
}
#corner-triangle{
width: 0;
height: 0;
border-top: 100px solid #4C98F7;
border-right: 100px solid transparent;
}
#parallelogram{
margin: 0 15px;
width: 200px;
height: 100px;
transform: skew(-20deg);
background: #4C98F7;
}
#diamond {
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: #4C98F7;
position: relative;
top: -100px;
}
#diamond:after {
content: "";
position: absolute;
left: -100px;
top: 100px;
width: 0;
height: 0;
border: 100px solid transparent;
border-top-color: #4C98F7;
}
#hexagons{
margin: 35px 0;
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid #4C98F7;
position: relative;
}
#hexagons:after {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #4C98F7;
position: absolute;
content: "";
top: 20px;
left: -60px;
}
#five-pointed-star {
margin: 100px 0 70px 0;
position: relative;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #4C98F7;
border-left: 100px solid transparent;
transform: rotate(35deg);
}
#five-pointed-star:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
border-bottom: 80px solid #4C98F7;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
transform: rotate(-35deg);
}
#five-pointed-star:after {
content: "";
position: absolute;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #4C98F7;
border-left: 100px solid transparent;
transform: rotate(-70deg);
}
#heart-shaped {
position: relative;
width: 100px;
height: 90px;
}
#heart-shaped:before,
#heart-shaped:after {
content: "";
position: absolute;
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #4C98F7;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart-shaped:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
#message-box {
margin: 0 20px;
width: 120px;
height: 80px;
background: #4C98F7;
position: relative;
border-radius: 10px;
}
#message-box:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid #4C98F7;
border-bottom: 13px solid transparent;
}
</style>
</head>
<body>
<section>
<div id="square"></div>
</section>
<section>
<div id="rectangle"></div>
</section>
<section>
<div id="circle"></div>
</section>
<section>
<div id="semicircle"></div>
</section>
<section>
<div id="oval"></div>
</section>
<section>
<div id="regular-triangle"></div>
</section>
<section>
<div id="corner-triangle"></div>
</section>
<section>
<div id="parallelogram"></div>
</section>
<section>
<div id="diamond"></div>
</section>
<section>
<div id="hexagons"></div>
</section>
<section>
<div id="five-pointed-star"></div>
</section>
<section>
<div id="heart-shaped"></div>
</section>
<section>
<div id="message-box"></div>
</section>
</body>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www.jianshu.com/p/f40617d863a3
https://css-tricks.com/the-shapes-of-css/
https://www.w3cplus.com/css/create-shapes-with-css
CSS实现图形效果的更多相关文章
- 利用CSS制作图形效果
前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧 以下所有内容只使用一个HTML元素.任何类型 ...
- 纯CSS制作图形效果
下面所有的例子都是在demo.html的基础上添加相关样式实现的. <!DOCTYPE html> <html> <head> <meta charset=& ...
- CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]
转载链接:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不 ...
- CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- 纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
- CSS制作图形速查表
很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...
- 【转】CSS制作图形速查表-存档
http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...
- 95+强悍的jQuery图形效果插件
现在的网站越来越离不开图形,好的图像效果能让你的网站增色不少.通过JQuery图形效果插件可以很容易的给你的网站添加一些很酷的效果. 使用JQuery插件其实比想象的要容易很多,效果也超乎想象.在本文 ...
- 一种巧妙的使用 CSS 制作波浪效果的思路
在之前,我介绍过几种使用纯 CSS 实现波浪效果的方式,关于它们有两篇相关的文章: 纯 CSS 实现波浪效果! 巧用 CSS 实现酷炫的充电动画 本文将会再介绍另外一种使用 CSS 实现的波浪效果,思 ...
- css三级菜单效果
一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...
随机推荐
- 让vs自动提示没有using的类
默认情况下,没有using的类,敲代码时没有智能提示,需要在[工具]->[选项]中开启
- [转帖]rsync原理
简介: Rsync(remote synchronize)是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件.Rsync使用所谓的"Rsync算法"来使本地和远 ...
- [转帖]（1.2）sql server for linux 开启代理服务（SQL AGENT），使用T-SQL新建作业
https://www.cnblogs.com/gered/p/12518090.html 回到顶部 [1]启用SQL Server代理 sudo /opt/mssql/bin/mssql-conf ...
- [转帖]Oracle数据库开启NUMA支持
NUMA简介 NUMA(Non Uniform Memory Access Architecture,非统一内存访问)把一台计算机分成多个节点(node),每个节点内部拥有多个CPU,节点内部使用共有 ...
- [转帖]TiKV 内存参数性能调优
https://docs.pingcap.com/zh/tidb/stable/tune-tikv-memory-performance 本文档用于描述如何根据机器配置情况来调整 TiKV 的参数,使 ...
- [粘贴]TiDB Lightning 断点续传
https://www.bookstack.cn/read/tidb-6.1-zh/tidb-lightning-tidb-lightning-checkpoints.md 大量的数据导入一般耗时数小 ...
- [转帖]基于Fuse的用户态文件系统性能优化几点建议
https://zhuanlan.zhihu.com/p/68085075 目前很多文件系统基于Fuse( http://fuse.sourceforge.net/ )开发,在较为深入钻研Fuse实现 ...
- [转帖]【JVM】堆内存与栈内存详解
堆和栈的定义 java把内存分成栈内存和堆内存. (1)栈内存 在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配. 当在一段代码块中定义一个变量时,java就在栈中为这个变量分 ...
- Find -mtime 的图解
- elementUI自定义单选框内容
<template> <div> <div class="heng-div"> <el-radio v-model="radio ...