CSS3 Experiments

Learning by doing

Generate content with :before and :after

CSS Triangle

This is a comment

The trick here is to add content with :before or :after that has height and width of 0, solid transparent border of some width and border-top-color with the same color as the box. In addition this generated content is positioned absolutely. Here is the code:

.box
  background-color: #40a728
  color: white
  font-weight: bold
  margin: 2em
  padding: 1em
  border-radius: 5px
  position: relative

  &:after
    content: ""
    position: absolute
    bottom: -19px
    left: 20px
    width: 0
    height: 0
    border: 10px solid transparent
    border-top-color: #40a728

CSS Quotes

This is a quote by some very famous person

blockquote
  color: #40a728
  background: none
  &:before, &:after
    font-size: 2em
    vertical-align: middle
  &:before
    content: "\275D"
    margin-right: 10px
  &:after
    content: "\275E"
    margin-left: 10px

Back to the homepage