Can someone show me how to make this in either html or css please

Unfortunately not. box-shadows do not respond to the border-radius property.

However… that isn’t the real issue.
The problem is that .box has no dimensions. By default it is a square.

Try giving .box some dimensions, maybe {width:10px, height;10px;}
and then add {border-radius:50%} and see what you think.

https://jsfiddle.net/Lqu7rgqk/7/

2 Likes

When setting a fixed height and with of a box, how can I fill in the empty space in the middle?

Middle empty space.

Fill in with the piece?

30px / 30px fits right in the middle.

The “empty space” is the 30px by 30px box you created. You can adjust it to whatever size you want.

Create a smaller initial box and make the first colour stripes green and black.

It needs to be fixed w and h.

Blue last, blue in the middle.

You’ve just said you want that green and black piece in the middle, but use whatever colours you want. To reduce the size of the middle square, reduce the pixel dimensions.

I’ve been using this for that.

Sorry, you’ve lost me. I don’t understand what that table has to do with it.

Your code has this:

.box {
  width:30px;
  height:30px;

and then the box-shadow information. If you want the inner square to be smaller, then reduce the size from 30px to whatever suits.

How would I reduce the size of the circle?

Which circle? I see no circle in either your image or your fiddle.

This works even better. Copy and paste into notepad.
http://ncalculators.com/multiplication-print.php?v=100&h=100

For what? Why do you require a multiplication table? How is it relevant to this discussion?

A post was split to a new topic: Fitting a table into Google docs

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.