CSS三角做法

最新推荐文章于 2024-05-24 10:29:27 发布

迪仙女

最新推荐文章于 2024-05-24 10:29:27 发布

阅读量114

点赞数

分类专栏： html+css+js学习

本文链接：https://blog.csdn.net/m0_48270515/article/details/108448099

版权

html+css+js学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!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>
 div{
   position: relative;
   width: 249px;
   height: 35px;
   border: 1px solid #000000;
 }
 div::after{
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   height: 15px;
   width: 15px;
   border-right: 1px solid #000000;
   border-bottom: 1px solid #000000;
   transform: rotate(45deg);
 }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

在这里插入图片描述
给div的after伪元素一个右边框一个下边框，再顺时针旋转即可