css畫出三角形,√,×
阿新 • • 發佈:2020-12-12
技術標籤:前端
<style>
.triangle {
display: inline-block;
margin-bottom: 10px;
width: 0;
height: 0;
}
.top {
border: 50px solid #eaeaea;
border-top-color: #ffc0cb;
}
</style>
<div class="triangle top"></div>
<style> .triangle { display: inline-block; margin-bottom: 10px; width: 0; height: 0; } .left { border-left: 100px solid #eaeaea; border-top: 100px solid #ffc0cb; } </style> <div class="triangle right"></div>
<style>
.triangle {
display: inline-block;
margin-bottom: 10px;
width: 0;
height: 0;
}
.left {
border-left: 100px solid #eaeaea;
border-top: 100px solid #ffc0cb;
}
</style>
<div class="triangle left"></div>
<style> .true { width: 50px; height: 20px; border: 1px solid red; border-width: 0 0 1px 1px; transform: rotate(-45deg); } </style> <div class="true"></div>
<style>
.false {
width: 40px;
height: 1px;
background: red;
transform: rotate(45deg);
}
.false:after {
content: '';
display: block;
width: 40px;
height: 1px;
background: red;
transform: rotate(-90deg);
}
</style>
<div class="false"></div>
<style> .dayu { margin-left: 10px; width: 30px; height: 30px; border: 1px solid red; border-width: 0 0 1px 1px; transform: rotate(45deg); } </style> <div class="dayu"></div>