css画三角形的两种方法

画三角形
- 1 border
- 2 css的clip-path

画三角形

1 border

<div class="left-down-small" />
<div class="left-down-large" />
<style scoped>
.left-down-small {width: 0;height: 0;border-style: solid;border-color: transparent transparent var(--color-background-second) transparent;border-width: 0 700px 260px 0;position: fixed;top: 100%;transform: translate(0, -100%);z-index: 1;}.left-down-large {width: 0;height: 0;border-style: solid;/*border-color: transparent transparent linear-gradient(to right, #24223D, var(--color-background)) transparent;*/border-color: transparent transparent #24223D transparent;border-width: 0 700px 400px 0;position: fixed;top: 100%;transform: translate(0, -100%);}
</style>

左下角的三角形：

<div class="right-top-small" />
<script scoped>.right-top-small {width: 0;height: 0;border-style: solid;border-color: #282441 transparent transparent transparent;/*border-color: red transparent transparent transparent;*/border-width: 200px 0 0 320px;position: fixed;left: 100%;transform: translate(-50%, 0);z-index: 100;}
</script>

右上角的三角形：

2 css的clip-path

http://tools.jb51.net/code/css3path

css的clip-path是裁剪盒子，100%width是盒子的宽度，非常好用，可以配合background-image做渐变色。如下：

左下角的三角形：

<div class="left-down-small" />
<div class="left-down-large" />
<style scoped>
.left-down-small {width: 700px;height: 260px;background-image: linear-gradient(to right, var(--color-background-second), var(--color-background-second));clip-path: polygon(0 100%, 0 0, 100% 100%);position: fixed;top: 100%;transform: translate(0, -100%);z-index: 1;}.left-down-large {width: 700px;height: 400px;background-image: linear-gradient(to right, var(--color-background-second-a), var(--color-background-second-a));clip-path: polygon(0 100%, 0 0, 100% 100%);position: fixed;top: 100%;transform: translate(0, -100%);}
</style>

右上角的三角形：

<div class="right-top-small" />
<script scoped>.right-top-small {width: 320px;height: 200px;background-image: linear-gradient(to right, var(--color-background-second), var(--color-background));clip-path: polygon(0 0, 100% 0, 100% 100%);position: fixed;left: 100%;transform: translate(-50%, 0);z-index: 100;}.right-top-large width: 375px;height: 315px;background-image: linear-gradient(to right, var(--color-background-second-a), var(--color-background));clip-path: polygon(0 0, 100% 0, 100% 100%);position: fixed;left: 100%;transform: translate(-50%, 0);}
</script>

css画三角形的两种方法相关推荐

css实现三角形的6种方法
在一些面试经验中,经常能看到有关css的题目都会有一道如何使用css绘制三角形,而常见的回答通常也只有使用border进行绘制一种方法. 而css发展到今天,其实有很多有意思的仅仅使用css就能绘制出 ...
c语言绘制松树图形代码,WPS怎么画松树? wps画松树的两种方法
wps中可以绘制一些图形,该怎么绘制松树图形呢?下面我们就来看看详细的教程. 方法一: 许多小伙伴可能只知道WPS文档是一款专门用于文字编辑的软件,其他它还可以是画画,是的,你没有看错,就是画画.今天 ...
html+css实现三角形的三种方法
一.淘宝网的三角形实现 <!DOCTYPE html> <html><head><meta charset="utf-8" />&l ...
CSS实现三角形的四种方法
方法一:使用 border (常见) [解释]不设置宽高,用边框大小控制三角型大小 [分解步骤] 设置一个div不设宽高 [示例] <style>#triangle{width: 0;he ...
css设置透明度的两种方法
一.css rgba()设置颜色透明度语法: rgba(R,G,B,A); RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词的缩写.RGBA 颜 ...
利用数学公式在Scratch画圆的两种方法（坐标、角度）以及在教学中的实现
今天在翻Scratch课件时看到了一个利用Scratch画太阳系行星运转的动画,包括公转和自转,感觉很有意思.但是一看程序,各个行星的移动轨迹竟然是把圆上所有坐标写了一遍,这种操作不禁让我想到了C语言 ...
absolute定位css元素居中的两种方法
1(上下左右居中,不能微调) position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; 2(上下左右居中,可微调) posit ...
css如何设置透明度？设置透明度的两种方法（代码实例）
在前端页面开发布局的时候,为了给用户呈现不同的效果,经常需要设置透明度,那么css是怎样设置透明度的?本章给大家介绍用css设置透明度的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下 ...
css画三角形和箭头
css画三角形: 使用 CSS 绘制三角形的第一种方法就是使用「border」属性. 给定一个宽度和高度都为 0 的元素,其 border 的任何值都会直接相交,我们可以利用这个交点来创建三角形. ...

css画三角形的两种方法

css画三角形的两种方法

画三角形

1 border

2 css的clip-path

css画三角形的两种方法相关推荐

最新文章

热门文章