I have a game that looks a bit like a game from 1980. And i have this dialog:
#firstPageText {
width: 300px;
min-height: 100px;
border: 2px solid;
padding: 1em;
margin: 0;
position: absolute;
bottom: 50px;
left: 50%;
-ms-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
font-family: 'Press Start 2P', cursive;
border-radius: 5px;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<p id="firstPageText">
This is a test text.
</p>
I wanted to add a border-radius to this dialog like the ones from pokemon:
Is there a way to achieve this pixeled border-radius, instead of the rounded border-radius?
I would consider mulitiple background:
#firstPageText {
--b:5px; /* the thickness */
--c:#000; /* the color */
width: 300px;
min-height: 100px;
font-family: 'Press Start 2P', cursive;
padding:calc(5*var(--b));
position:relative;
}
#firstPageText::before,
#firstPageText::after {
content:"";
position:absolute;
inset:0 0 50% 0;
background:
linear-gradient(var(--c) 0 0) 50% 0 /calc(100% - 4*var(--b)) var(--b),
linear-gradient(var(--c) 0 0) 0% 100%/var(--b) calc(100% - 2*var(--b)),
linear-gradient(var(--c) 0 0) 100% 100%/var(--b) calc(100% - 2*var(--b)),
conic-gradient(from 90deg,var(--c) 90deg,#0000 0) 0 0/calc(2*var(--b)) calc(2*var(--b)),
conic-gradient(from 180deg,var(--c) 90deg,#0000 0) 100% 0/calc(2*var(--b)) calc(2*var(--b));
background-repeat:no-repeat;
}
#firstPageText::after {
transform-origin:bottom;
transform:scaleY(-1);
}
<p id="firstPageText">
This is a test text.
</p>
Apply different colors to understand the puzzle:
#firstPageText {
--b:10px; /* adjust this */
width: 300px;
min-height: 100px;
font-family: 'Press Start 2P', cursive;
padding:calc(5*var(--b));
position:relative;
}
#firstPageText::before,
#firstPageText::after {
content:"";
position:absolute;
inset:0 0 50% 0;
background:
linear-gradient(red 0 0) 50% 0 /calc(100% - 4*var(--b)) var(--b),
linear-gradient(blue 0 0) 0% 100%/var(--b) calc(100% - 2*var(--b)),
linear-gradient(green 0 0) 100% 100%/var(--b) calc(100% - 2*var(--b)),
conic-gradient(from 90deg,orange 90deg,lightblue 0) 0 0/calc(2*var(--b)) calc(2*var(--b)),
conic-gradient(from 180deg,purple 90deg,lightblue 0) 100% 0/calc(2*var(--b)) calc(2*var(--b));
background-repeat:no-repeat;
}
#firstPageText::after {
transform-origin:bottom;
transform:scaleY(-1);
filter:hue-rotate(180deg);
}
<p id="firstPageText">
This is a test text.
</p>