1. border三角形

设置div的width,height均为0，设置四面的border值，想要哪边的三角就设置哪边的border值，把其他边的border值设置为 transparent（透明）

css：

 div {width: 0;height: 0;margin: 10px;}.all {border-top: 50px solid #e6e6ae;border-left: 50px solid #ff976d;border-bottom: 50px solid #4ceff5;border-right: 50px solid #d664e6;}.left {border: 50px solid transparent;border-left: 50px solid #ff976d;}.bottom {border: 50px solid transparent;border-bottom: 50px solid #4ceff5;}.right {border: 50px solid transparent;border-right: 50px solid #d664e6;}.top {border: 50px solid transparent;border-top: 50px solid #e6e6ae;}

html：

 <div class="first"><div class="all"></div><div class="left"></div><div class="top"></div><div class="right"></div><div class="bottom"></div></div>

这种一般用于消息框：

css：

 .big {width: 100px;height: 50px;border-radius: 10px;background-color: #f35496;position: relative;}.big::after {position: absolute;content: "";right: -20px;top: 10px;width: 0;height: 0;border: 10px solid transparent;border-left: 10px solid #f35496;}

html：<div class="big"></div>

2. linear-gradient 三角形

使用角度，使用渐变定格到50%，然后再把其中一半设置成transparent。

css：

.scoend {width: 100px;height: 100px;background: linear-gradient(45deg,rgb(233, 153, 196) 50%,rgb(119, 229, 243) 50%);}.example1 {margin-bottom: 10px;width: 100px;height: 100px;background: linear-gradient(45deg,rgb(233, 153, 196) 50%,transparent 50%);}.example2 {margin-bottom: 10px;width: 100px;height: 100px;background: linear-gradient(45deg,transparent 50%,rgb(153, 233, 233) 50%);}.example3 {margin-bottom: 10px;width: 100px;height: 100px;background: linear-gradient(135deg,transparent 50%,rgb(218, 191, 243) 50%);}.example4 {width: 100px;height: 100px;background: linear-gradient(135deg,rgb(243, 212, 191) 50%,transparent 50%);}

html：

    <div class="scoend"></div><div class="example1"></div><div class="example2"></div><div class="example3"></div><div class="example4"></div>

常用于选中下标，删除下标等

css：

 .item {width: 100px;height: 40px;background-color: #e4e4e4;text-align: center;line-height: 40px;position: relative;}.item::after {position: absolute;content: "";width: 6px;height: 3px;right: 2px;bottom: 4px;border: 1px solid #fff;border-color: transparent transparent #fff #fff;transform: rotate(-45deg);}.item::before {position: absolute;content: "";width: 20px;height: 20px;right: 0;bottom: 0;background: linear-gradient(135deg,transparent 50%,rgb(94, 129, 243) 50%);}

html：

   <div class="item">全部</div>

如果不想画这种等腰三角形，用渐变也可以画

只要利用高中数学的三角函数控制好宽高跟旋转的角度
css：

 .scoend {width: 173.2px;height: 100px;background: linear-gradient(30deg,rgb(233, 153, 196) 50%,rgb(119, 229, 243) 50%);}

只是这种方式不太精确。

3.tramform+rotate 实现

 .third {width: 100px;height: 50px;background-color: #abcada;position: relative;overflow: hidden;}.third::before {position: absolute;width: 100px;height: 50px;background-color: violet;content: "";left: 0;bottom: 0;transform-origin: left bottom;transform: rotate(30deg);}

旋转后把溢出的隐藏，就能得到这样的三角形啦

4.canvas画图三角形

这种方法不太实用，了解一下就可以了，canvas画图可以画出各种各样的图形。

当你在三角形上右键点击时会显示图片另存为，会把canvas绘制的区域视为图片。
代码：

 <canvas id="tutorial" width="300" height="300"></canvas><script>draw();function draw() {var canvas = document.getElementById("tutorial");if (!canvas.getContext) return;var ctx = canvas.getContext("2d");ctx.beginPath();ctx.moveTo(50, 50);ctx.lineTo(200, 50);ctx.lineTo(200, 200);ctx.closePath(); //虽然我们只绘制了两条线段，但是closePath会closePath，仍然是一个3角形ctx.stroke(); //描边。stroke不会自动closePath()}draw();</script>

css实现各种各样的三角形相关推荐

css加号图标_纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）...
三角形 .box{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transpa ...
三角形css_纯 CSS 实现绘制各种三角形（各种角度）
转载至:纯 CSS 实现绘制各种三角形(各种角度) 一.前言三角形实现原理:宽度width为0:height为0:(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red, ...
CSS绘制形状（三角形、四分之一圆、半圆、圆、梯形、球体、菱形）
CSS绘制形状(三角形.四分之一圆.半圆.圆.梯形.球体.菱形) 三角形 div {width: 0;height: 0;border: 200px solid transparent;border- ...
CSS中左上朝向三角形(Top-Left Triangle)的几种制作方式
今天我们介绍几种,用css实现左上朝向三角形(Top-Left Triangle)的写法. 示意图(以宽高各60px为例): 这种三角形,一般可以用来做"对话框"类型图形的左下小脚 ...
CSS样式写出三角形
CSS样式写出三角形的样式,在这里只举出两个例子,三角形朝上和三角形朝下,还有左上,左下,右上,右下.有需要或者感兴趣的可以自己调一下代码.调border的top.bottom.left.right的 ...
面试官：CSS如何画一个三角形？原理是什么？
一.前言在前端开发的时候,我们有时候会需要用到一个三角形的形状,比如地址选择或者播放器里面播放按钮通常情况下,我们会使用图片或者svg去完成三角形效果图,但如果单纯使用css如何完成一个三角形呢? ...
CSS 如何画一个三角形？原理是什么？
css 画三角形的原理是利用盒子边框完成的,实现步骤可以分为以下四步: 1.设置一个盒子 2.设置四周不同颜色的边框 3.将盒子宽高设置为 0,仅保留边框 4.得到四个三角形,选择其中一个后,其他三角 ...
纯 CSS 实现绘制各种三角形（各种角度）
纯 CSS 实现绘制各种三角形(各种角度) 一.前言三角形实现原理:宽度width为0:height为0:(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red,这个画的 ...
CSS画圆、三角形、品字、骰子
CSS画圆.三角形.品字.骰子前言:这篇文章主要是本人正在看面试题,面试题当成八股文来背,太难了.所以,通过写笔记,并自己实践来加深印象.如果这篇文章对你有帮助,请不要吝啬你的赞. 圆让 bord ...

css实现各种各样的三角形

css实现各种各样的三角形

1. border三角形

2. linear-gradient 三角形

3.tramform+rotate 实现

4.canvas画图三角形

css实现各种各样的三角形相关推荐

最新文章

热门文章