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

相关文章
|
6月前
|
前端开发
CSS画三角形(三种方法)
CSS画三角形(三种方法)
|
1月前
|
前端开发
如何使用css写三角形
如何使用css写三角形
23 4
|
1月前
|
前端开发
用纯 CSS 创建一个三角形
使用纯 CSS 可以通过边框技巧创建三角形。例如,要创建一个指向下方的等边三角形,可以将 `width` 和 `height` 设为 `0`,并通过透明的左右边框和有颜色的底边来形成三角形。
|
2月前
|
前端开发
CSS制作小三角形
CSS制作小三角形
16 1
|
1月前
|
前端开发
CSS绘制三角形的方法
CSS绘制三角形的方法
|
3月前
|
前端开发
如何使用css写三角形
如何使用css写三角形
36 1
|
3月前
|
前端开发 JavaScript Serverless
揭秘CSS布局神器:vw/vh、rem、%与px大PK,掌握它们,让你的网页设计秒变高大上,面试难题迎刃而解!
【8月更文挑战第4天】在Web开发中,合理选择CSS单位对响应式布局至关重要。本文探索viewport单位(vw/vh)、rem、百分比(%)及像素(px)的基础知识与应用场景。通过代码示例,展示如何运用这些单位实现全屏布局、尺寸比例调整、灵活的元素大小及固定尺寸。最后,模拟面试题,介绍如何仅用CSS实现一个元素的高度为其宽度两倍且响应视口变化的方法。
258 8
|
4月前
|
前端开发
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
75 1
|
4月前
|
存储 数据采集 移动开发
|
5月前
|
前端开发
技术经验分享:CSS画三角形(三种方法)
技术经验分享:CSS画三角形(三种方法)
26 0

热门文章

最新文章