Can you make triangles like the ones above only using CSS?
You can by manipulating one of the box model properties, border!
Border code samples: https://www.w3schools.com/css/css_border.asp
Border Direction
- Border can be applied the same in all directions (top, bottom, right and left) OR it can be applied to just one side, two sides, or three sides.
Example: border-bottom, border-top, border-right, border-left
Border Shorthand
- Border-width, border-style, and border-color can all be collapsed into one line of code. Example:
border: 1px solid blue is the same as border-width: 1px; border-style: solid; and border-color: blue;
So, to create a border only on the right side of content would look like this: border-right: 1px solid blue;
Create a Triangle
- Start a new webpage in Notepad++ with opening and closing html, head, title, and style, and body tags
- Put Triangle inside the title tags
- Save as triangle.html
- Create two classes inside of your style tags in your head section, .bluetriangle and .redtriangle
- Put width: 0px; and height: 0px; inside of each of those classes- the size of of your triangle is going to depend upon your border width!
- Try using the different border properties (border-top, border-bottom, border-left, and border-right) to create the blue and red triangles you see above.
Hint: you only need three sides
Hint: you will only use the color on one of the sides and the color value for the other two sides will be transparent
Hint: it will be easier if you use border shorthand (see above)
Hint: the border width value should be the same for each of the triangle sides