ボタンや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>
<body>
<div class="blue">
<div class="white">
</div>
</div>
</body>
</html>
とCSS行く次のようにHTMLコードがある
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を検索して、試みてください。それでも問題が解決しない場合は、**あなたのコード**に戻り、あなたが試したことを説明してください。 –