Home > Developer > Web Develop
1. CSS Implementation triangle
<!DOCTYPE HTML><HTML> <Head> <title>Little Triangle</title> <MetaCharSet= "Utf-8"> <style>Div{width:0px;Height:0px;Border:50px Solid Transparent;}div:nth-child (1){Border-left-color:Red;}Div:nth-child (2){Border-top-color:Red;}Div:nth-child (3){Border-bottom-color:Red;}Div:nth-child (4){Border-right-color:Red;}Div{float: Left;} </style> </Head> <Body> <Div></Div><Div></Div><Div></Div><Div></Div> </Body></HTML>
2. Show Shadows when hover
<!DOCTYPE HTML><HTML><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title>Hovershadow</title> <style>. Shadow{transition:All 0.15s Linear; }. Shadow:hover{Box-shadow:0px 5px 20px #ddd; }. Box{margin:30px Auto;width:200px;Height:200px;Border:1px solid #ddd;Border-radius:10px;padding:10px; } </style></Head><Body><Divclass= "Box Shadow"> <Divclass= "title">Here is the title</Div> <Divclass= "Content">This is the content area.</Div></Div></Body></HTML>
Some common CSS implementations of small effects, such as triangles, shadows, etc.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
