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.

    AP Graphis
    position: relative;
    width: 20vw;
    height: 20vw;
    background: orange;
    <h1 class="quarter" style="color: white;"><br>&nbsp;<u>AP GRAPHICS</u></h1>

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.

enter image description here


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


从 a:hover 中排除 标记下的类

CSS 在 Safari 中不起作用,但在 Chrome 和其他浏览器中起作用

将 div 居中放在一个圆圈中

如何使用变换来对齐 HTML 中的图例?

如何随着material 徽章的索引增加而更改 colored颜色 ,例如(0,1,2,3,..etc)在Angular



两个内联块元素,每个 50% 宽,不能并排放置在一行中


如何跨域使用 window.postMessage?

推特 bootstrap 导航栏中的“图标栏”

将 div 定位在另一个 div 的底部附近



使用 jQuery 创建表 - 追加

Node.js 不能创建 Blob?

是否有使用 javascript 生成 html 的最佳实践

在 HTML5 中播放无限循环的视频加载