CSS Battle #40 – Letter B

[nickytonline]

Link to battle:

Let's battle! ⚔️

Copy the code block below to format your comment on the discussion thread:

<details>
<summary>Code Source  – <strong>score {character count}</strong></summary>
<!-- have to be followed by an empty line! -->

```html
your cssbattles code here!
```

</details>

What others will see:

This will result in a nice hidden bit like so:

Code Source – score {character count}

your cssbattles code here!

---

Nick's solution

<style>
  body {
    background: #6592CF;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 0 50% 50% 50%;
    border: 50px solid #243D83;
    transform: translateY(25%);
  }
body::after {

content: "";

top: -50;

position: absolute;

width: 50px;

height: 50px;

background: #6592CF;

}

</style>

[Narigo]

Something with a linear-gradient 😉

<div></div>
<style>
  body {
    background: #6592CF;
    display: grid;
    place-items: center;
  }
  div {
    width: 200px;
    height: 200px;
  }
  div::after,div::before {
    position: absolute;
    content: '';
    height: 100px;
    width: 100px;
  }
  div::before {
    border: 50px solid #243D83;
    border-radius: 0 100px 100px 100px;
  }
  div::after {
    background: linear-gradient(to right, #243D83 50px, #6592CF 0 100px, #243D83 50px);
  }
</style>

[danieltott]

First pass! 690.43 (156 chars)

Unminified:

```html

<style> *{ background:#6592CF; color:#243D83; } body{ border:50px solid; border-radius:40vw; margin:50 100; } p{ margin:-50; height:100; width:50; border-left:50px solid; } </style> ```

Minified:

```html

<style>*{background:#6592CF;color:#243D83}body{border:50px solid;border-radius:40vw;margin:50 100}p{margin:-50;height:100;width:50;border-left:50px solid ```