css画三角形(面试题)

简介: css画三角形(面试题)

代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
        div {
            width: 0px;
            height: 0px;
            border-top: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 100px solid blue;
            border-left: 100px solid transparent;
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>


过程:先绘制一个正方形,之后用四种不同的颜色绘制出四种不同颜色的边框,之后将正方形的宽高设置为0,将不想要的三个边框设置成透明颜色,就可以制作一个三角形了,这个是制作等腰直角三角形,制作锐角或者钝角时候,只需要将对应的宽度缩小或者扩大就可以了。


image.png

相关文章
|
5月前
|
前端开发
CSS画三角形(三种方法)
CSS画三角形(三种方法)
|
5月前
|
前端开发
css实现伪类三角形气泡框 带边框
css实现伪类三角形气泡框 带边框
49 3
|
5月前
|
前端开发
玩转CSS盒子之 三角形盒子
玩转CSS盒子之 三角形盒子
55 0
|
5天前
|
前端开发
CSS制作小三角形
CSS制作小三角形
|
2月前
|
前端开发
如何使用css写三角形
如何使用css写三角形
30 1
|
2月前
|
前端开发 JavaScript Serverless
揭秘CSS布局神器:vw/vh、rem、%与px大PK,掌握它们,让你的网页设计秒变高大上,面试难题迎刃而解!
【8月更文挑战第4天】在Web开发中,合理选择CSS单位对响应式布局至关重要。本文探索viewport单位(vw/vh)、rem、百分比(%)及像素(px)的基础知识与应用场景。通过代码示例,展示如何运用这些单位实现全屏布局、尺寸比例调整、灵活的元素大小及固定尺寸。最后,模拟面试题,介绍如何仅用CSS实现一个元素的高度为其宽度两倍且响应视口变化的方法。
161 8
|
3月前
|
前端开发
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
61 1
|
3月前
|
存储 数据采集 移动开发
|
4月前
|
前端开发
技术经验分享:CSS画三角形(三种方法)
技术经验分享:CSS画三角形(三种方法)
23 0
|
5月前
|
前端开发
一文搞懂css常用字体属性与背景属性(2),非科班面试之旅
一文搞懂css常用字体属性与背景属性(2),非科班面试之旅