html5实现圆圈里带一个三角形,CSS3 画基本图形，圆形、椭圆形、三角形等

最新推荐文章于 2023-07-14 16:03:20 发布
最新推荐文章于 2023-07-14 16:03:20 发布
阅读量859 收藏 3
点赞数
文章标签： html5实现圆圈里带一个三角形

CSS3 画基本图形，圆形、椭圆形、三角形等

发布时间：2016-09-20 16:25:53   作者：佚名   text-message.png 我要评论

这篇文章主要介绍了CSS3 画基本图形，圆形、椭圆形、三角形等的相关资料,需要的朋友可以参考下

CSS3 圆形

#css3-circle{

width: 150px;

height: 150px;

border-radius: 50%;

background-color: #232323;}

CSS3 椭圆形

#css3-elipse{

width: 200px;

height: 100px;

border-radius: 50%;

background-color: #232323;}

CSS3 三角形

#css3-triangle{

width: 0;

height: 0;

border-left: 100px solid transparent;

border-right: 100px solid transparent;

border-bottom: 150px solid #232323;}

CSS3 平行四边形

#css3-parallelogram{

width: 200px;

height: 100px;

background: #232323;

-webkit-transform: skew(-45deg); -moz-transform: skew(-45deg); -o-transform: skew(-45deg);

transform: skew(-45deg);

}

CSS3 梯形

#css3-trapezoid{

width: 100px;

height: 0;

border-bottom: 100px solid #232323;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

}

CSS3 六角星

#css3-six-star{

width: 0;

height: 0;

position: relative;

border-bottom: 100px solid #232323;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

}#css3-six-star:after{

content: "";

width: 0;

height: 0;

position: absolute;

left: -50px;

top: 35px;

border-top: 100px solid #232323;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

}

CSS3 五角星

#css3-five-star{

width: 0px;

height: 0px;

margin: 50px 0;

position: relative;

display: block;

color: #232323;

border-right: 100px solid transparent;

border-bottom: 70px  solid #232323;

border-left:100px solid transparent; -moz-transform:rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform:rotate(35deg); -o-transform:rotate(35deg);

}#css3-five-star:before{

border-bottom: 80px solid #232323;;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

position: absolute;

height: 0;

width: 0;

top: -45px;

left: -63px;

display: block;

content: ''; -webkit-transform: rotate(-35deg); -moz-transform:rotate(-35deg); -ms-transform:rotate(-35deg); -o-transform:rotate(-35deg);

}#css3-five-star:after{

position: absolute;

display: block;

color: #232323;

top: 3px;

left: -105px;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid #232323;

border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform:rotate(-70deg); -ms-transform:rotate(-70deg); -o-transform:rotate(-70deg);

content: '';

}

CSS3 五边形

#css3-pentagon {

position: relative;

width: 54px;

border-width: 50px 18px 0;

border-style: solid;

border-color: #232323 transparent;}#css3-pentagon:before {

content: "";

position: absolute;

height: 0;

width: 0;

top: -85px;

left: -18px;

border-width: 0 45px 35px;

border-style: solid;

border-color: transparent transparent #232323;}

CSS3 六边形

#css3-hexagon {

width: 100px;

height: 55px;

background: #232323;

position: relative;

}#css3-hexagon:before {

content: "";

position: absolute;

top: -25px;

left: 0;

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 25px solid #232323; }#css3-hexagon:after {

content: "";

position: absolute;

bottom: -25px;

left: 0;

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 25px solid #232323; }

CSS3 心形

#css3-heart {

position: relative;

width: 100px;

height: 90px;

}#css3-heart:before, #css3-heart:after{

position: absolute;

content: "";

left: 50px;

top: 0;

width: 50px;

height: 80px;

background: #232323;

-moz-border-radius: 50px 50px 0 0;

border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg);

transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%;

transform-origin: 0 100%;

}#css3-heart:after {

left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);

transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%;

transform-origin :100% 100%;

}

CSS3 八卦

#css3-gossip {

width: 96px;

height: 48px;

background: #f1f1f1;

border-color: #232323;

border-style: solid;

border-width: 2px 2px 50px 2px;

border-radius: 100%;

position: relative;

}#css3-gossip:before{

content: "";

position: absolute;

top: 50%;

left: 0;

background: #f1f1f1;

border: 18px solid #232323;

border-radius: 100%;

width: 12px;

height: 12px;

}#css3-gossip:after {

content: "";

position: absolute;

top: 50%;

left: 50%;

background: #232323;

border: 18px solid #f1f1f1;

border-radius:100%;

width: 12px;

height: 12px;

}

相关文章

9a8b0939ab0802e20f8b99c87794e4be.png

这篇文章主要介绍了纯CSS3+DIV实现小三角形边框,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-03

d0ff30a6625dc6cb78b3eb47a88a6a13.png

这篇文章主要介绍了详解css如何利用 :before :after 写小三角形的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-22

这篇文章主要介绍了用CSS3绘制三角形的简单方法,是CSS前端绘图的基础,需要的朋友可以参考下2015-07-17

图片的布局和排版非常重要，纯大部分网页或多或少都会用到图片。特别是对于图片较多的网页，今天要给大写带来一款纯css3实现图片三角形排列。适合一系列的图片，需要的朋友2014-10-17

今天读了篇关于如何使用css3创建3d四面体的文章，觉的相当不错，所以拿出来和大家分享一下，如何使用div+css创建三角形。在这里我先把相关代码粘贴出来，然后再为大家讲解2013-01-06

304762c9c141c86a968b38e6dc0e48ca.png

这篇文章主要介绍了CSS3实现三角形不断放大效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-13

最新评论

小楼看花人
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用CSS实现椭圆，三角形，五角星等图形
左岸
08-20 1224
使用CSS实现椭圆，三角形，五角星等图形
html5实现圆圈里带一个三角形,CSS制作箭头图标代码(圆，三角形，椭圆)c
weixin_36371504的博客
05-31 912
看到一些网站的椭圆边框是用css样式写出来得，请问怎样写？首先打开sublime text编辑器，新建一个html文件，里面写入一个p标签：怎么把DIV做成椭圆形，CSS，最好有代码参见下面样式代码： #oval{ width:200px; height:100px; background:green; border-radius:100px / 50px; }按钮边框椭圆效果，不用图片，用css...
html5圆圈动画效果,CSS3实现光感圆圈动画效果
weixin_35890852的博客
06-03 846
CSS3实现光感圆圈动画效果全部代码html>CSS3实现光感圆圈动画效果body{background:#111;}.halo{transition:.4sall;}.halo.input{width:100px;height:100px;}.halo.input:before{width:100px;height:100px;}.ring-1{positi...
html5实现圆圈里带一个三角形,html中的倒三角形
weixin_34867001的博客
05-31 806
种类：单击下拉选项设置事件节点的种类，可设置为时间型、类目型、数值型。 节点形状：单击下拉选项设置节点形状，可设置为菱形、圆、三角形(上)、三角形(下)、方形、叉。 节点大小：输入数值或单击设置节点大小。 默认样式：设置节点的默认样式，包括节点填充色、节点边框色、节点边框粗细。 选Enumeration，弱团)是一种重叠社区发现的算法，在社交网络中是一个很重要的研究。所谓的弱团挖掘，即利用检测到的...
HTML+CSS画圆、半圆、扇形、三角形
weixin_50419323的博客
09-05 3238
使用border-radius：____px代码实现圆，半圆，扇形，三角形 1、圆 html中设定一个盒子 css中盒子样式 代码实现图 2、半圆 html中设定一个盒子 css中盒子样式 代码实现效果图 3、扇形 html中设定一个盒子 css中盒子样式 代码实现效果图 4、三角形：善用transparen （透明） html中设定一个盒子 css中盒子样式 ...
html5 css3圆形波浪百分比加载动画特效.zip
07-11
else waveX -= 3; ctx.globalCompositeOperation = 'source-over'; ctx.beginPath(); ctx.arc(canvasWidth/2, canvasHeight/2, canvasHeight/2, 0, Math.PI*2, true); ctx.closePath(); ...
html5+css3实现圆分成四个扇形，并有点击事件
12-15
】做一个圆:周围4个扇形，有点击事件（html5+css3实现扇形），html5+css3实现圆分成四个扇形，并有点击事件。使用的是vue，但是可以提取为html+css，自己提取
css3实现的圆形从中心向四周扩散动画效果
09-08
在本文中，我们将深入探讨如何使用CSS3来创建一个引人注目的动画效果：圆形从中心向四周扩散。这个效果可以用于网站加载指示器、按钮激活反馈等多种应用场景，为用户界面增添动态美感。 首先，我们需要了解CSS3中的...
CSS3实现光感圆圈动画特效代码
03-20
在CSS3中，实现光感圆圈动画特效是一种常见的网页设计技术，它可以为网页增添动态美感，提升用户体验。本文将详细解析如何利用CSS3的特性来创建这种效果。 首先，我们要了解CSS3中的关键帧动画（@keyframes）。这是...
利用css做圆形和三角形
最新发布
weixin_65459869的博客
07-14 72
css如何画一个三边形,如何用css3画三角形和圆形
weixin_39534978的博客
08-04 347
通过CSS样式可以控制网页中各个元素的显示方式，通过CSS样式可以在网页中画出一个三角形，圆形等形状。(了解更多CSS知识，请学习CSS视频教程)CSS画三角形方法实现三角形的绘制很简单。第一步：新建一个元素，随便什么元素，不过我习惯性的会用块元素来做。如果行内元素就display:block它。第二步：为盒子添加样式。1.向上的三角形.kailong{width:0;height:0;borde...
CSS3创建H5预载动画效果
cwscwj的专栏
05-31 1854
前端技术 CSS3创建H5预载动画效果 作者：李 格锐2015.03.09 预载是互联网交互设计中必不可少的元素之一，它们负责在内容显示前，既可增强用户体验的视觉有趣化，同时也避免了因低速网络环境导致的长时间响应问题。而CCS3预载不仅是替换图片类预载的优化方案，同时也支持Retina等高清屏幕下的快速显示。 动画预载是内容加载前支持快速响应
css圆角矩形＋底部三角
bidepanm的博客
08-30 259
css
html5实现圆圈里带一个三角形,Fabric.js - 详细使用教程1（绘制图形：矩形、圆形、三角形、不规则图形）...
weixin_34238178的博客
05-31 1268
一、绘制图形1，绘制矩形下面代码在画布上绘制一个红色圆角矩形，并带有橙色边框。canvas {border: 1px dashed black;}window.onload = function() {var canvas = new fabric.Canvas('canvas');var rect = new fabric.Rect({top : 50, //距离画布上边的距离left : 10...
css加js实现圆嵌套正方形嵌套三角并可区别点击
weixin_34162228的博客
03-07 549
假设一个圆里嵌套了一个正方形----正方形嵌套一个三角形，实现的话自然是不难，可是如何分别确认每个元素呢？？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,...
CSS 三角形 圆形
weixin_34235135的博客
03-12 54
*{ margin: 0; padding: 0;} #triangle-up{ width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px soli...
实现一个三角形加圆点css效果
weixin_33907511的博客
10-19 145
代码如下：说下思路，主要用到了::before和::after伪元素 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="widt...
CSS3 实现圆形、椭圆形、三角形等各种形状样式
weixin_30369041的博客
02-24 409
CSS3 圆形 #css3-circle{ width: 150px; height: 150px; border-radius: 50%; background-color: #232323;} CSS3 椭圆形 #css3-elipse{ width: 200px; height: 100px; border-radius: 50%; backgrou...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值