我是靠谱客的博主 健康芝麻,最近开发中收集的这篇文章主要介绍用CSS画实心三角形和空心三角形,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

(1)实心三角形

html

<div class='sanjiao'></div>


css

.sanjiao{
   border-left: 10px solid transparent;
   border-bottom: 10px solid red;//向上的三角
   border-right: 10px solid transparent;
   border-top: 10px solid transparent;
   width: 0px;
   height: 0px;
}


(2)空心三角形

这里画了一个正方形,不设置背景色,设置左边和上边相邻两边的border,再画两个三角形,边长为第一个三角形的对角线长度,通过旋转驾到第一个三角形的斜边上,通过两个矩形组合成一个空心的三角形

.sanjiao{
  width: 100px;
  height: 100px;
  border-left: 1px solid red;
  border-top: 1px solid red;
  position: relative;
}


.sanjiao:after{
    content: "";
    position: absolute;
    left: 29px;
    top: 29px;
    width: 141.4px;
    height: 141.4px;
    border-left: 1px solid red;
    transform: rotate(45deg);//通过旋转来改变三角形的朝向
}



最后

以上就是健康芝麻为你收集整理的用CSS画实心三角形和空心三角形的全部内容,希望文章能够帮你解决用CSS画实心三角形和空心三角形所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(64)

评论列表共有 0 条评论

立即
投稿
返回
顶部