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 class="quarter" 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.

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

Html相关问答推荐

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

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

将 div 居中放在一个圆圈中

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

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

使用smoke动画减小ring大小

YouTube:如何在静音的情况下呈现嵌入视频

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

在FORM中使用DIV是否正确?

如何跨域使用 window.postMessage?

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

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

如何垂直显示范围输入滑块

Webstorm:“无法解析目录”

使用 jQuery 创建表 - 追加

Node.js 不能创建 Blob?

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

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

CSS:如何在表格中的行之间创建间隙?

javascript如何上传blob?