阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      纯 css 实现箭头的代码

      实现向上,向下,向左、向右的;

      HTML 代码如下

      <div id="triangle-facing-top"></div>
      <div id="triangle-facing-right"></div>
      <div id="triangle-facing-bootom"></div>
      <div id="triangle-facing-left"></div>
      

      CSS 代码

      #triangle-facing-top {
          display: inline-block;  margin: 72px;
          width: 120px; height: 120px;
      
          border-top: 24px solid; border-right: 24px solid;
          transform: rotate(315deg);
      }
      
      #triangle-facing-right {
          display: inline-block;  margin: 72px;
          width: 120px; height: 120px;
      
          border-right: 24px solid; border-bottom: 24px solid;
          transform: rotate(-45deg);
      }
      
      #triangle-facing-bootom {
          display: inline-block;  margin: 72px;
          width: 120px; height: 120px;
      
          border-bottom: 24px solid; border-left: 24px solid;
          transform: rotate(315deg);
      }
      
      #triangle-facing-left {
          display: inline-block;
          margin: 72px;
          border-left: 24px solid; border-bottom: 24px solid;
          width: 120px; height: 120px;
          transform: rotate(45deg);
      }
      
      目录
      本文目录
      目录