1.CSS画三角形

利用border属性就可以。

原理如下：

给一个元素设置宽高都为0，

width: 0px;
height: 0px;

然后元素的4个方向的边框都设置一样的样式，颜色透明：

border: 100px solid transparent;

然后要哪边成三角形，就把哪边的颜色透明改变就行。

border-right-color:blue ;

原理简图如下：

分析：所以会这样分

eg：

    <style>.box{width: 0px;height: 0px;border: 100px solid transparent;border-right-color:blue ;}</style><div class="box"></div>

代码也可以这样写：

    <style>.box{width: 0px;height: 0px;border-bottom:100px solid transparent;border-top: 100px solid transparent;border-left: 100px solid transparent;border-right: 100px solid blue;}</style><div class="box"></div>

2.CSS画月亮

主要是利用了：box-shadow盒子阴影，boder-radius元素圆角边框，

background-color:transparent元素背景设置为透明实现的。

    <style>.box{width: 200px;height: 200px;margin-left: 100px;/*设置元素圆角边框 将元素设置为一个圆形*/border-radius: 50%;/* 左偏移量，右偏移量，模糊距离，阴影颜色 */box-shadow: -50px 50px 0px orange; /* 将元素背景设置为透明，遮住阴影一部分，使得阴影出现月亮形状 */background-color: transparent;}</style><div class="box"></div>

CSS如何画一个三角形 + CSS如何画月亮相关推荐

使用CSS画一个三角形
效果图全部代码 <!DOCTYPE html> <html> <head><title></title><style type=&q ...
[css] CSS画一个三角形，CSS绘制空心三角形
1.不同理解的边框 <div class="border"></div> .border {width: 50px;height: 50px;border: ...
CSS 如何画一个三角形？原理是什么？
css 画三角形的原理是利用盒子边框完成的,实现步骤可以分为以下四步: 1.设置一个盒子 2.设置四周不同颜色的边框 3.将盒子宽高设置为 0,仅保留边框 4.得到四个三角形,选择其中一个后,其他三角 ...
用css画一个三角形
用css画一个三角形 HTML: <div id="delta"></div> CSS: #delta{width: 0;height: 0;border- ...
如何用CSS画一个三角形？
hello,大家好,最近在看前端的八股,里面有这样一道题,如何用CSS画出三角形?我想以这个题为例,仔细讲一下这个题的技巧,以及对这道题拓展一下,即如何画出圆形和椭圆形? 首先,如何用CSS画一个三角 ...
css画一个三角形,梯形,平行四边形
一使用css简单的画一个三角形 1. 先来看看border的划分 .demo{width:100px;height:100px;border:3px red solid;} 2. 当盒子的宽度为0会 ...
面试官：CSS如何画一个三角形？原理是什么？
一.前言在前端开发的时候,我们有时候会需要用到一个三角形的形状,比如地址选择或者播放器里面播放按钮通常情况下,我们会使用图片或者svg去完成三角形效果图,但如果单纯使用css如何完成一个三角形呢? ...
CSS如何画一个三角形？
通常情况下,我们会使用图片或者svg去完成三角形效果图,但如果单纯使用css如何完成一个三角形呢? 实现过程似乎也并不困难,通过边框就可完成盒子模型 <style>.border {wi ...
css3画一个三角形,css3 画三角形
/*箭头向上*/ .arrow-up { width:0; height:0; border-left:20px solid transparent; border-right:20px solid ...

CSS如何画一个三角形 + CSS如何画月亮

1.CSS画三角形

2.CSS画月亮

CSS如何画一个三角形 + CSS如何画月亮相关推荐

最新文章

热门文章