2015年3月9日星期一

The Shapes of CSS

Sometimes, we need some shapes in our html pages. For instance, you would like to put a left triangle shape to link to the previous page and a right triangle to link to the next page. There are some simple css tricks with which you can make it. I found a great website gave out many examples. See CSS Tricks

The html code below have 3 elements in it, 2 button and 1 image. We want the button in triangle shape.

 <button class="btn_prev">Previous Slide</button>  
 <img src="images/vancouver_01.jpg" alt="Vancouver" class="slide" />  
 <button class="btn_next">Next Slide</button>  

We can make it with some css code:

 .btn_prev {
 /* triangle code from: 
 http://css-tricks.com/examples/ShapesOfCSS/
 */
 border-top: 25px solid transparent;
 border-right: 25px solid #000000;
 border-bottom: 25px solid transparent;
 left: 0; 
}

Can you write css code for the Next button?

没有评论: