倒三角和对钩效果

效果图:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.triangle{
  display: block;
  width: 0px;
  height: 0px;
  border-left: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #FF5954;
  border-top: 15px solid #FF5954;
}
.check{
  display: block;
  width: 6px;
  height: 12px;
  border-color:#fff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin:0 auto
}

</style>
</head>
<body>
<div class="triangle"></div>
<div style="width:200px;height200px;background:red;">
	<div class="check"></div>
</div>

</body>
</html>
发布了84 篇原创文章 · 获赞 102 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/allen_csdns/article/details/103906412