mixing two characters using css and drawing circle-CodePudding

I want to write ap graphics inside a circle. The circle is not full but like 30 %. I have wrote AP graphics inside a responsive quarter circle. The code I wrote is.

<html>
<head>
<title>
    AP Graphis
</title>
<style>
    .quarter{
    position: relative;
    width: 20vw;
    height: 20vw;
    border-top-right-radius:0;
    border-top-left-radius:0;
    border-bottom-right-radius:100%;
    border-bottom-left-radius:0;
    background: orange;
}
</style>
</head>
<body>
    <h1  style="color: white;"><br>&nbsp;<u>AP GRAPHICS</u></h1>
</body>
</html>

But I could not make it like the image below. Also I dont know how to mix the a and p from AP. I also dont know the font of text. I am new to css and dont know a stuff about it.

CodePudding user response：

Web developers dont usually create all the graphics again in css. Instead, they just use the graphics created by graphic designers into the HTML pages.

Solution 1: Export the graphic (e.g., a logo) into a JPEG, or PNG file and then use it into your HTML page (using css or html img tag).

Solution 2: If you want high quality and efficient solution, export the graphic into a vector file (e.g., an SVG file) and then use it into your web page. This involves two following steps:

Step 2.1: Exporting graphics into a vector file: Open the graphic designing software (Adobe Illustrator, CorelDRAW), and then try to export as into svg (for Adobe Photoshop, follow this).

Step 2.2: Import vector file into the webpage: see MDN Docs

CodePudding user response：

   body {
                margin: 0;
                padding: 0;
            }
            .container {
                width: 25rem;
                height: 25rem;
                border-top-right-radius: 0;
                border-top-left-radius: 0;
                border-bottom-right-radius: 100%;
                border-bottom-left-radius: 0;
                background: orange;
                display: flex;
            }
            .quarter {
                text-decoration: underline;
                color: white;
                font-family: system-ui, -apple-system, BlinkMacSystemFont,
                    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
                    "Helvetica Neue", sans-serif;
                margin-top: 8rem;
                margin-left: 4rem;
            }
            .quarter span {
                margin-left: -1.2rem;
            }

<div >
            <h1 >
                <span>
                    <span>A</span>
                    <span>P</span>
                </span>
                GRAPHICS
            </h1>
        </div>