버튼, div, 단락 등에 CSS 코드를 적용하여 내용에 따라 자동으로 축소 및 확대되어 흐려지지 않는 반응 곡선 부분을 만들어야합니다.CSS와 HTML을 사용하여 그림과 같이 구석 구석을 만드는 방법은 무엇입니까?
가능한 한 많은 요소에 적용 할 스타일을 선호합니다 (색상 및 패딩과 같은 최소 변경).
backgroud-image 속성 또는 SVG를 사용하는 것은 좋지 않습니다. 그냥 둥근 모서리를 원하는 경우에
결과 같은 요소 
.
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p>The border-radius property allows you to add rounded corners to elements.</p>
<p>Rounded corners for an element with a specified background color:</p>
<p id="rcorners1">Rounded corners!</p>
</body>
</html>
기여 해줘서 고맙지 만 요소로 달성하고 싶은 이미지가 포함되어 있습니다. 'border-radius' 속성이 목표를 달성하지 못한다고 생각합니다. –
다음과 같이 시도해보십시오.
이것은 당신이 HTML 코드는
<html>
<body>
<div class="blue">
<div class="white">
</div>
</div>
</body>
</html>
그리고 CSS를 다음과 같다
https://jsfiddle.net/rahulSlash/qva79at5/
달성하기 위해 무엇을하려고하는의 가까운 구현 간다 :
.blue {
height: 175px;
width: 300px;
background-color: #005999;
border-radius: 40%/20%;
position: relative;
margin-left: 100px;
}
.white {
position: absolute;
height: 75px;
width: 100px;
background-color: white;
left: -50px;
top: 50px;
border-radius: 40%/25%;
box-shadow: -5px 0px 10px -2px #aaaaaa;
}
도움이 될지 알려주세요. –
노력해 주셔서 감사합니다. 그러나이 솔루션은 위쪽과 아래쪽을 커브로 만들 뿐이며 모든 다른 크기의 모양을 자동으로 맞추지 않을 것입니다. –
다음은 둥근 모서리의 예입니다.
<html>
<head>
<style>
p {
border-radius:15px;
border:5px dotted blue;
}
</style>
<body bgcolor="tomato">
<h1> Hi! </h1>
<hr>
<p> Hey! This has a border! </p>
</body>
</html>
적어도이 코드를 직접 작성해야합니다. 스택 오버플로는 코드 작성 서비스가 아닙니다. 나는 당신이 [** 추가 연구 **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) Google을 통해 또는 SO를 검색하여 시도하고 시도하십시오. 문제가 계속되면 ** 코드 **로 돌아와서 시도한 내용을 설명하십시오. –