css
<style>
#d2{
border: 1px solid red;
width: 100px;
height: 100px;
/* 网页的安全区域:顶宽居中 */
margin: 200px auto;
border-top-width: 0px;
border-right: none;
/* 变换 rotate旋转 deg度 如果正值旋转顺时针 ,负值逆时针 */
transform: rotate(135deg);
}
#d3{
/*
倒三角
1 设置 width heigh 为 0
2 设置4个方向上的边框的宽度
3 把其他三个方向上边框设置成透明颜色,只留一个边框的颜色
*/
width: 0;
height: 0;
border: 10px solid;
border-color: transparent transparent red transparent;
}
</style>
html
<div id="d2"></div>
<div id="d3"></div>