css设置三角形以及三角形的旋转

一、三角形

代码展示:

.box {margin: 100px auto;width: 0;height: 0;border: 10px solid transparent;/*三角形宽10px 边框为透明*/border-top-color: green;/*顶部边框为绿色*/border-bottom: none;/*底部去掉边框*/transition: all 0.5s ease 0s;/*设置动画效果  0.5秒完成动画 ease(逐渐变慢)*/
}
/*设置hover效果*/
.box:hover {transform: rotate(180deg);/*旋转180度 */
}

效果图展示：

鼠标未触碰：

鼠标触碰后

二、三角箭头

代码展示

.box2 {margin: 150px auto;width: 5px;height: 5px;border-top: 3px solid red; /* 上箭头颜色 */border-right: 3px solid red;/* 右箭头颜色 */transform: rotate(135deg);/*旋转135度*/transition: all 0.5s ease 0s;/*设置动画效果  0.5秒完成动画 ease(逐渐变慢)*/
}
.box2:hover {transform: rotate(-45deg);/* 逆旋转180度 */}

图片展示：

鼠标未触碰

鼠标触碰后

css设置三角形以及三角形的旋转相关推荐

html中怎么设置页面的弧度,如何用css实现弧度圆角?三角形以及圆形
如何用css实现弧度圆角?三角形以及圆形用css画矩形圆角 ,需要使用到border-radius这个属性,下图四角圆,代码显示如下:border-radius:60px; width:360px; ...
CSS绘制形状（三角形、四分之一圆、半圆、圆、梯形、球体、菱形）
CSS绘制形状(三角形.四分之一圆.半圆.圆.梯形.球体.菱形) 三角形 div {width: 0;height: 0;border: 200px solid transparent;border- ...
面试官：CSS如何画一个三角形？原理是什么？
一.前言在前端开发的时候,我们有时候会需要用到一个三角形的形状,比如地址选择或者播放器里面播放按钮通常情况下,我们会使用图片或者svg去完成三角形效果图,但如果单纯使用css如何完成一个三角形呢? ...
CSS 如何画一个三角形？原理是什么？
css 画三角形的原理是利用盒子边框完成的,实现步骤可以分为以下四步: 1.设置一个盒子 2.设置四周不同颜色的边框 3.将盒子宽高设置为 0,仅保留边框 4.得到四个三角形,选择其中一个后,其他三角 ...
css实现各种各样的三角形
css实现各种各样的三角形 1. border三角形 2. linear-gradient 三角形 3.tramform+rotate 实现 4.canvas画图三角形 1. border三角形设置 ...
CSS如何画一个三角形？
通常情况下,我们会使用图片或者svg去完成三角形效果图,但如果单纯使用css如何完成一个三角形呢? 实现过程似乎也并不困难,通过边框就可完成盒子模型 <style>.border {wi ...
三角形css_纯 CSS 实现绘制各种三角形（各种角度）
转载至:纯 CSS 实现绘制各种三角形(各种角度) 一.前言三角形实现原理:宽度width为0:height为0:(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red, ...
css绘制向左三角形_CSS绘制三角形—border法
1. 实现一个简单的三角形使用CSS盒模型中的border(边框)即可实现如下所示的三角形: CSS实现简单三角形实现原理: 首先来看在为元素添加border时,border的样子:假设有如下代码 ...
纯 CSS 实现绘制各种三角形（各种角度）
纯 CSS 实现绘制各种三角形(各种角度) 一.前言三角形实现原理:宽度width为0:height为0:(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red,这个画的 ...
CSS画圆、三角形、品字、骰子
CSS画圆.三角形.品字.骰子前言:这篇文章主要是本人正在看面试题,面试题当成八股文来背,太难了.所以,通过写笔记,并自己实践来加深印象.如果这篇文章对你有帮助,请不要吝啬你的赞. 圆让 bord ...

css设置三角形以及三角形的旋转

css设置三角形以及三角形的旋转相关推荐

最新文章

热门文章