前端css倒三角设置方法

布满荆棘的人生 2022-03-16 00:14 559阅读 0赞

倒三角形：

盒子宽高设为0px

border设置合适的宽度，border-top设置颜色，其它透明便可

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>$美少女战士$</title>
        <style>
     
            /*   *   全局选择器*/
     
            * {
                margin: 0;  /*清除body和body孩子的外边距*/
                padding: 0;  /*清除body和body孩子的内边距*/
     
            }
            body {
                margin: 0;   /*清掉body默认外边距*/
            }
            .box {
     
                width: 0px;
                height: 0px;
              /*  background-color: pink;*/
                margin-top: 50px;
                margin-left: 200px;
     
                /*增大盒子 内减 width---》保证盒子正常放置 */
              /*  padding-left: 30px;*/
                /*边框border：  宽度 px  边形  solid 实现  dotted 圆点  dashed虚线    none 没有边框     颜色  */
               /* border: 100px solid  red;*/
                /*倒三角形*/
                border-top: 10px solid blue;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 10px solid transparent;
     
     
     
     
     
            }
     
        </style>
    </head>
    <body>
    <div class="box"></div>
     
    <p>空间的萨芬华润股份</p>
     
    <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，559人围观）

还没有评论，来说两句吧...

相关阅读

相关 css三角制作的方法8.12

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

「爱情、让人受尽委屈。」/ 2022年09月04日 06:59/ 0 赞/ 172 阅读

相关数学三角倒三角

![拉普拉斯算子][65ae019918d94ac7bbb70798eab768e0.png] ![向量微分算子][dd42f3c471a248c5a0c7d0a379a24

柔光的暖阳◎/ 2022年08月31日 14:27/ 0 赞/ 231 阅读

相关倒直角三角

实验目的：输出星图上机感言：看到自己写的程序达到目的，心里非常高兴。 ![0_1328080173l498.gif][] include <iostream>

缺乏、安全感/ 2022年06月16日 13:11/ 0 赞/ 182 阅读

相关倒三角

实验目的：输出星图 // 以下是程序，请在需要的位置写入必要的注释 include <iostream> using namespace std;

野性酷女/ 2022年06月16日 12:00/ 0 赞/ 328 阅读

相关倒三角

include<iostream> using namespace std; int main() { int i,j;

怼烎@/ 2022年06月14日 03:30/ 0 赞/ 198 阅读

相关写倒三角

用CSS即可绘制出各种箭头，无需裁剪图片，甚至没有用到CSS3的东西。对浏览器支持良好。基本原理原理非常简单，通过截取border(边框)的部分“拐角”实现，几行C

本是古典何须时尚/ 2022年06月02日 23:13/ 0 赞/ 209 阅读

相关倒三角九九乘法表

public class Main \{ public static void main(String args\[\])\{ for(int i=1;i<10;i++

喜欢ヅ旅行/ 2022年04月22日 14:08/ 0 赞/ 186 阅读

相关打印空心的倒三角模型

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

超、凢脫俗/ 2022年04月16日 05:18/ 0 赞/ 184 阅读

相关前端css倒三角设置方法

倒三角形：盒子宽高设为0px border设置合适的宽度，border-top设置颜色，其它透明便可 <!DOCTYPE html> <html lan

布满荆棘的人生/ 2022年03月16日 00:14/ 0 赞/ 560 阅读

相关 java打印倒三角

如下所示：使用java在控制台输出三角形 1 3 6 10 15 2 5 9 14 4 8 13 7

川长思鸟来/ 2021年09月21日 22:22/ 0 赞/ 446 阅读