Record🤔

uri:

"at://did:plc:4hm2yozxzsakerfalloor5s6/app.bsky.feed.post/3khrbj5yrzf2k"

cid:

"bafyreigt2qb3d7vi5lxsxe4hr5sxjdpdnshjyl6yznzcknueq43pwlflx4"

value:

text:

"Basic #tinyCSStip.💡

So you have a responsive, flexible `width` rectangular box with `aspect-ratio: 2` and want to turn it into a half disc?

Use a `50%` horizontal `border-radius` and a vertical one that's `100%` for the top corners (first two listed) and `0` for the other two!"

$type:

"app.bsky.feed.post"

embed:

$type:

"app.bsky.embed.images"

images:

• alt:

  "Code:
  ```
  .myElem {
  	width: 86%;
  	aspect-ratio: 2/ 1;
  	border-radius: 50%/ 100% 100% 0 0;
  	background: tomato
  }
  ```
  
  Result: a tomato half disc."

  image:

  

  View blob content

  $type:

  "blob"

  ref:

  $link:

  "bafkreiaeasr6il7te5tnjzfvhg76ravuyyht5b7uv3kgi4bjkwzccieqpi"

  mimeType:

  "image/jpeg"

  size:

  168957

  aspectRatio:

  width:

  680

  height:

  648

langs:

• "en"

facets:

• index:

  byteEnd:

  22

  byteStart:

  6

  features:

  • tag:

    "tinyCSStip.💡"

    $type:

    "app.bsky.richtext.facet#tag"

createdAt:

"2023-12-30T13:10:08.874Z"