右箭头:

width: 7px;
height: 7px;
border-top: 2px solid black;
border-right: 2px solid black;
transform: rotate(45deg);

三角形：

.box{width:20px;height:20px;background-color:blue;
}<div class='box'></div>

给 div 添加四条边框样式，边框设置的宽一点，四条边框的颜色给不一样的值。

.box{width:50px;height:50px;background-color:blue;             border-top:50px solid red;border-right:50px solid yellow;border-bottom:50px solid green;border-left:50px solid pink;
}

把 div 的宽高设置为 0px，去掉蓝色的背景色。

.box{width:0;height:0;border-top:50px solid red;border-right:50px solid yellow;border-bottom:50px solid green;border-left:50px solid pink;
}

假设想要一个向上的三角形，只要把盒子上、右、左方向边框的颜色设置为透明。

.box{width:0px;height:0px;border-top:50px solid rgba(0,0,0,0);border-right:50px solid  rgba(0,0,0,0);border-bottom:50px solid green;border-left:50px solid  rgba(0,0,0,0);
}// 简易代码：
.box{width:0px;height:0px;border: 50px solid transparent;border-bottom-color:  green;
}

旋转的正方体：

.box {width: 200px;height: 200px;margin: 100px auto;perspective: 20000px;position: relative;/* 透视强度 */perspective: 20000px;/* 设置所有子元素在 3D 空间呈现，否则旋转起来就是扁平的 */transform-style: preserve-3d;transition: transform 5s;
}
.box:hover {transform: rotateX(360deg) rotateY(360deg);
}
.side {width: 200px;height: 200px;position: absolute;top: 0;left: 0;
}
.side:nth-child(1) {background: rgba(225, 239, 30, 0.4);/* 前面 */transform: translateZ(100px);
}
.side:nth-child(2) {background: rgba(207, 250, 16, 0.4);/* 上面 *//* 旋转了 90 度之后，它的正前方就是朝上的，因此要使用 translateZ() */transform: rotateX(90deg) translateZ(100px);
}
.side:nth-child(3) {background:rgba(3, 51, 9, 0.4);/* 背面 */transform: translateZ(-100px);
}
.side:nth-child(4) {background: #2417d566;/* 下面 */transform: rotateX(-90deg) translateZ(100px);
}
.side:nth-child(5) {background: rgba(224, 14, 147, 0.4);/* 左侧面 */transform: rotateY(90deg) translateZ(100px);
}
.side:nth-child(6) {background: rgba(235, 17, 25, 0.4);/* 右侧面 */transform: rotateY(-90deg) translateZ(100px);
}<div class="box"><!-- 正方体的六个面 --><div class="side"></div><div class="side"></div><div class="side"></div><div class="side"></div><div class="side"></div><div class="side"></div>
</div>

CSS 实现箭头、三角形、旋转的正方体相关推荐

css设置三角形的旋转方法2以及箭头三角形的设置和旋转
shttps://blog.csdn.net/weixin_52984349?spm=1011.2266.3001.5343 这是上次我们设置三角形以及旋转方法的地址,又想看的小伙伴们可以去看一下,这 ...
纯css实现实心三角形，向右箭头
效果如下实现之前先了解一下css的一个属性: 也就是说这个属性可以设置透明的色值, 举个例子: 看这个形状是如何实现的 <!DOCTYPE html> <html lang= ...
html div三角形,css+div打造三角形(箭头)
在很多网站都见过这样的箭头 ,之前我一直以为是图片,直到今天才知道原来可以用css做.开始看代码没太看懂,后来自己试了几遍才恍然大悟.贴出来分享下.(大神请直接忽略) 先看代码: HTML部分就是一个 ...
html三角形图标,纯css三角形和css三角箭头实例代码
css箭头实例demo 纯css三角形和css三角箭头,可以随意放大缩小,可以随意颜色,这要比图片实现的三角箭头或者三角形状要灵活的多. 本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不 ...
用html和css做一个旋转的正方体
用html和css做一个旋转的正方体 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
react CSS实现箭头图标
参考链接: css3实现小箭头,各种图形 https://blog.csdn.net/tangtang5963/article/details/51490107 针对于三角形图标,以前的做法基本上是以 ...
HTM+CSS实现立方体图片旋转展示效果
目的:HTM+CSS实现立方体图片旋转展示效果环境: 系统:Win10 环境: 一.示例1. 话不多说直接上代码 <html><head><style>/*立方体 ...
html魔方转动效果,简单说用CSS做一个魔方旋转的效果
说明魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...
简单说用CSS做一个魔方旋转的效果
说明魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...

CSS 实现箭头、三角形、旋转的正方体

右箭头:

三角形：

旋转的正方体：

CSS 实现箭头、三角形、旋转的正方体相关推荐

最新文章

热门文章