引言： 我们在网页中经常会见到一些小的三角形，比如对话框上的小角等。我们可以用css来画出这样的三角形

css画三角形 — 用盒子的边就可以画出来。

一、步骤

设置一个盒子，宽高为0
给盒子的边设置宽度，并添加颜色

<div></div>
<style>
div {width: 0;height: 0;border-top: 50px solid red;border-bottom: 50px solid blue;border-right: 50px solid green;border-left: 50px solid black;
}
</style>

3.选取需要的三角形，将其他的三个三角形设置为透明

只要蓝色部分的三角形，将其他颜色置为透明

参考代码如下

      width: 0;height: 0;/*第一种写法*//* border-top: solid 50px  transparent;border-right: solid 50px  transparent;border-bottom: solid 50px blue  ;border-left: solid 50px  transparent;*//*第二种写法*/border: 50px solid transparent;border-bottom-color:  blue ;

二、加强版用途：

代码演示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS三角强化的巧妙运用</title><style>.price {width: 160px;height: 24px;line-height: 24px;border: 1px solid red;margin: 0 auto;}.miaosha {position: relative;float: left;width: 90px;height: 100%;background-color:red;text-align: center;color: #fff;font-weight: 700;margin-right: 8px;}.miaosha i {position: absolute;right: 0;top: 0;width: 0;height: 0;border-color: transparent #fff transparent transparent;border-style: solid;border-width: 24px 10px 0 0;}.origin {font-size: 12px;color: gray;text-decoration: line-through;}</style></head><body><div class="price"><span class="miaosha">¥1650<i></i></span><span class="origin">¥5650</span></div></body>
</html>

【经典面试题】css如何画一个三角形？相关推荐

CSS 如何画一个三角形？原理是什么？
css 画三角形的原理是利用盒子边框完成的,实现步骤可以分为以下四步: 1.设置一个盒子 2.设置四周不同颜色的边框 3.将盒子宽高设置为 0,仅保留边框 4.得到四个三角形,选择其中一个后,其他三角 ...
面试官：CSS如何画一个三角形？原理是什么？
一.前言在前端开发的时候,我们有时候会需要用到一个三角形的形状,比如地址选择或者播放器里面播放按钮通常情况下,我们会使用图片或者svg去完成三角形效果图,但如果单纯使用css如何完成一个三角形呢? ...
CSS如何画一个三角形？
通常情况下,我们会使用图片或者svg去完成三角形效果图,但如果单纯使用css如何完成一个三角形呢? 实现过程似乎也并不困难,通过边框就可完成盒子模型 <style>.border {wi ...
CSS如何画一个三角形 + CSS如何画月亮
1.CSS画三角形利用border属性就可以 . 原理如下: 给一个元素设置宽高都为0, width: 0px; height: 0px; 然后元素的 ...
使用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画一个三角形 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会 ...
html ul变成三角形,用CSS来画空心三角形的方法
画这里三角形的方法: 用CSS来实现:整个弹框的ID是#favoriteOptionMenus,对于#favoriteOptionMenus这个元素设置:before和:after的样式,让:befo ...

【经典面试题】css如何画一个三角形？

css画三角形 — 用盒子的边就可以画出来。

一、步骤

二、加强版用途：

【经典面试题】css如何画一个三角形？相关推荐

最新文章

热门文章