我已经开始使用 SVG 进行工具处理,并且进展顺利。
我正在尝试将图像对齐到左侧的上角,但是,我就是做不好。我想在首页显示四分之一的圆圈。
我已经按边距、右边和顶部设置了一些东西,但效果不是我想要的。 SVG 向页面左侧移动了一点,但仍然很远。 (下图)。
伙计们 - 我正在努力,但如果有人能提供任何资源或支持,我们将不胜感激。
我附加的第一张图片是我制作的,但第二张图片是我想要对齐的。
谢谢
.topcon {
background-color: #f6f5f5;
position: relative;
width: 200px;
height:250px;
border: 15px;
padding: 50px;
margin: 150px auto 150px auto;
border-radius: 20px;
}
.top-circle
{
position: absolute;
right: 700px;
top: 40px;
margin: -200px auto -200px autp;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="stylesheet"href="css/styles.css">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Profile card component</title>
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
body {
background-color: #00B6C7;
width: 1440px;
}
</style>
</head>
<img class="top-circle"src="images/bg-pattern-top.svg" alt="big circle on top">
<body>
<div class="topcon">
<h1>This is for what I made</h1>
<h1>I want the circle could go up and only show quarter of the circle</h1>
Victor Crest
26
London
80K
Followers
803K
Likes
1.4K
Photos
</body>
</html>