Drawing shapes in Quarto using CSS

CSS specifications

Add a css block at the top of your first slide, or, put the contents of this block into a .css file and call it in your yaml

.rect {
  background-color: red;
  opacity: .5;
  
  width: 200px; 
  height: 150px; 
}

.circ {
  background-color: yellow;
  opacity: .5;
  
  border-radius: 50%;
  height: 100px;   
  width: 100px;
}


.rect_outline {
  border: 5px solid;
  border-color: blue;
  opacity: .5;
  
  width: 200px; 
  height: 150px; 
}

.circ_outline {
  border: 5px solid;
  border-color: green;
  opacity: .5;
  
  border-radius: 50%;
  height: 100px;   
  width: 100px;
}

Using the div

To invoke it, add a div with the css class and the .absolute class. The location of each is specified using either a % or pixels from the top, bottom, right or left of the slide

I’ve created 4 pre-defined styles (click to see them appear): Filled circle, outline circle, filled box, outline box.

While it doesn’t matter if you use % or pixels, and top/bottom left/right to specify the absolute position, I recommend you choose one style to stick with, so that you get better at guestimating where it will go when you nudge it.

Use inline divs with text

You can also use these divs around specific items in text itself. For example, you can highlight a few words with this code or even a larger block of text.

Modify in the div

If you name any specification in the div itself, it will override the css. Here the circle is made wider (an oval) and the rectangle size and color is changed.

Position is absolute to the SLIDE, not the CONTENT

I added content, and the divs no longer appear where we originally put them on the text and the plot:

If you name any specification in the div itself, it will override the css. Here the circle is made wider (an oval) and the rectangle size and color is changed.

Style a shape without css

If you don’t mind the extra inline code, you can create a shape in the div itself,without having either a css code chunk or a css file. Here, all the properties for the square and oval are specified fully in the div.