css 实现三角形

破晓小v

已于 2022-07-20 18:15:31 修改

阅读量213

点赞数

分类专栏：前端-CSS篇文章标签： CSS 三角形边框颜色变形

于 2022-07-20 18:15:02 首次发布

本文链接：https://blog.csdn.net/weixin_41983443/article/details/125898068

版权

前端-CSS篇专栏收录该内容

8 篇文章 0 订阅

订阅专栏

css 实现三角形

蓝色三角形效果如下在这效果如下里插入图片描述
代码

<!DOCTYPE html>
<html>
<head>
<style>

.cus {
  width: 200px;
  height: 200px;
  background: pink;
  border: 2px solid #055FE7;
  position:relative;
}
.cusaa{
  width: 0px;
  height: 0px;
  border: 20px solid #000;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: #055FE7;
  border-right-color: transparent;
  position: absolute;
  right: -20px;
  top: -20px;
  transform: rotate(-45deg);
}
</style>
</head>
<body>

<div class='cus'>
<div class='cusaa'></div>
</div>

</body>
</html>