前言

本文主要介绍如何利用css制作三角形~

一、上三角形的制作

1、示例图：

2、方法简介：

1、将宽和高设为0，利用border制作合适大小的正方形

2、将无需呈现的部分边框颜色设为 transparent（透明）

3、实现过程

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>上方小三角形</title><style>.box1{width: 150px;height: 170px;background-color:  #bfa;margin-top: 100px;}.box2{position: absolute;left: 70px;top: 81px;width: 0;height: 0;border: 10px solid pink;border-top-color: transparent;border-left-color: transparent;border-right-color: transparent;}</style>
</head>
<body><div class="box1"><div class="box2"></div></div></body>
</html>

二、右三角形的制作（另外给三角形增加边框）

1、实例图

可以看到，红色的方形块也是有边框的，那么如何制作呢？

2、方法简介：

1、制作红色方形快（红色方形块的制作与上方的方法相同）

2、将方形快旋转合适的角度 ( transform: rotate(-45deg);)

3、给想要添加边框的边缘添加边框

3、实现过程

<!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>Document</title>
</head>
<style>.box1 {width: 100px;height: 100px;background-color: #fff;border: 1px solid black;}.box2 {position: absolute;left: 99px;top: 50px;width: 20px;height: 20px;border: 1px solid black;transform: rotate(-45deg);border-top: 1px solid #fff;border-left: 1px solid #fff;background-color:  red;}
</style><body><div class="box1"></div><div class="box2"></div>
</body><html>

总结

以上就是今天要讲的内容，希望可以帮助你吧……

CSS——制作三角形相关推荐

制作京东快递查询 css制作三角形
这是我学习前端道路上制作的一个小案例,想把这些记下来,记录我的学习经历和更加熟练的掌握代码..这个案例是当我们在下面输入数字时上面的盒子会放大的显示出来,效仿的是京东快递查询单号.好了,废物不多说,上 ...
CSS - 制作三角形
目录一.实现原理二.三角形制作案例 1.一个简单的三角形 2.直角三角形 3.带边框的三角形一.实现原理其实实现的原理很简单,就是通过css的border属性进行制作.那么为什么border属 ...
html+css制作三角形
今天我们来分享一下三角形的制作方法主要就是通过调整div的几个边框线,将它们调节的足够宽,然后再将div的宽度和长度重新赋值为0 代码如下: <div id="main"& ...
利用css制作三角形
1.首先制作一个正方形只设置边框 2.除了上边框其它边框都设置透明色(transparent) <style>div {width: 100px;height: 100px;border: ...
html css拖拽设计,css绘制三角形和 HTML拖拽事件
利用css制作三角形利用设置边框的三个边的长度和border实现三角形设置,并隐藏其他边例子:#yz3{ display: inline-block; 0; height: 0; border-t ...
php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
css制作tips提示框，气泡框，制作三角形
有时候我们的页面会需要这样的一些提示框或者叫气泡框,运用css,我们可以实现这样的效果. 为了实现上面的效果,我们首先要理解如何制作三角形. 当我们给一个DIV不同颜色的边框的时候,我们可以得到下面的 ...
【css】巧用border制作三角形
#css用border制作三角形 1.利用CSS盒模型盒模型上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角调整宽高大小可以调节三角形形 ...
css空心三角形_纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...

CSS——制作三角形

文章目录

前言

一、上三角形的制作

1、示例图：

2、方法简介：

3、实现过程

二、右三角形的制作（另外给三角形增加边框）

1、实例图

2、方法简介：

3、实现过程

总结

CSS——制作三角形相关推荐

最新文章

热门文章