首页 > 其他分享 >CSS绘制简单的流程图

CSS绘制简单的流程图

时间:2024-01-29 21:13:11浏览次数:30  
标签:flex 流程图 color border content arrow 10px 绘制 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>
      .content-list {
        display: flex;
      }
      .content-list-item {
        display: flex;
        position: relative;
        flex: 1;
      }
      .inner {
        width: 50%;
        padding: 10px 20px;
        background-color: orange;
      }
      .arrow {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        /* background-color: pink; */
        padding-left: 10px;
      }
      .arrow-level {
        width: 50%;
        border: 10px solid red;
      }
      .arrow-triangle {
        border: 10px solid transparent;
        border-left-color: red;
      }
    </style>
  </head>
  <body>
    <div class="content-list">
      <div class="content-list-item">
        <div class="inner">1</div>
        <div class="arrow">
          <div class="arrow-level"></div>
          <div class="arrow-triangle"></div>
        </div>
      </div>
      <div class="content-list-item">
        <div class="inner">2</div>
        <div class="arrow">
          <div class="arrow-level"></div>
          <div class="arrow-triangle"></div>
        </div>
      </div>
      <div class="content-list-item">
        <div class="inner">3</div>
        <div class="arrow">
          <div class="arrow-level"></div>
          <div class="arrow-triangle"></div>
        </div>
      </div>
      <div class="content-list-item">
        <div class="inner">4</div>
        <div class="arrow">
          <div class="arrow-level"></div>
          <div class="arrow-triangle"></div>
        </div>
      </div>
      <div class="content-list-item">
        <div class="inner">5</div>
        <!-- <div class="arrow">
          <div class="arrow-level"></div>
          <div class="arrow-triangle"></div>
        </div> -->
      </div>
    </div>
  </body>
</html>

标签:flex,流程图,color,border,content,arrow,10px,绘制,CSS
From: https://www.cnblogs.com/it774274680/p/17995335

相关文章

  • 每日刷题 绘制表格
    一.题目在中文Windows环境下,控制台窗口中也可以用特殊符号拼出漂亮的表格来。比如:┌─┬─┐│││├─┼─┤│││└─┴─┘其实,它是由如下的符号拼接的:左上=┌上=┬右上=┐左=├中心=┼右=┤左下=└下=┴右下=┘垂直=│水平=─......
  • vue配合什么css框架
    在Vue中使用CSS框架可以提高开发效率和网站外观的一致性。下面是一些与Vue兼容的常见CSS框架:BootstrapVue:BootstrapVue是一个基于Vue.js的Bootstrap组件库。它提供了一套完整的Vue.js组件,同时也支持Bootstrap的所有特性。ElementUI:ElementUI是一套基于Vue.js的组件库......
  • scss 走马灯效果(兼容微信小程序)
    <template><viewclass="marquee"><viewclass="marquee-inner"><spanv-for="(item,index)oftextList":key="index">{{item.text}}</span><!--复制一份内容-->......
  • css 转盘抽奖(兼容微信小程序)
    <template><divclass="turntable"v-wechat-title="$route.meta.title"><!--转盘包裹--><divclass="rotate"><!--转盘图片--><imageclass="dish"src="../../stati......
  • css实现子元素整体居中,最后一行靠左。grid布局
    <divclass="container"><divclass="item">1</div><divclass="item">2</div><divclass="item">3</div><divclass="item">4</div><divclass......
  • css背景图片实现object-fit的效果
     object-fit是一个用于控制替换元素(如<img>或<video>)内容在其容器内布局和缩放的CSS属性。它的作用是调整替换元素的尺寸和位置,使其适应容器,并保持其纵横比例。然而,object-fit属性本身并不直接适用于背景图片。如果你想在背景图片上应用object-fit效果,可以使用background-size......
  • css其他
    1、   css水平、垂直居中水平居中1)行内元素:text-align:center2)块级元素:margin:0auto3)position:absolute+left:50%+transform:translateX(-50%)4)display:flexjustify-content:center垂直居中1)设置line-height等于he......
  • 头像和消息组件css实现思路
    修改后:实现代码(可以用于组装头像和消息):<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>D......
  • [office] Excel2016瀑布图怎么做?Excel2016瀑布图绘制教程
    瀑布图源于形似瀑布,常用来反映数个特定数值之间的数量变化关系Excel2016瀑布图绘制教程新建一个EXCEL表格,输入数据。最好是增量、减量数据,这样做出的瀑布图才有对比。在数据区域单击右键,依次点击“插入”—“图表”—“所有图表”,选择“瀑布图”点击“确定”,生成瀑布图。从图中可以......
  • css 的三种元素
    css中包含3中元素:块状元素、内联元素(又叫行内元素)和内联块状元素。一、常用的块级元素(block):<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>主要特点:display:block1、每个块级元素独占一行。2、元素的高度、宽度、行高以及顶和底边......