0
A
答えて
0
丸みを帯びた角を作るために、transform: rotate()
を使用する要素を回転させるようにborder-radius
、
を使用し、
それは、疑似要素の上にそれを置くのがベストですので、あなたは親(45deg)
を回転させる必要はありませんし、子供(-45deg)
。
.shape {
width: 150px;
height: 150px;
position: relative;
}
.shape::before {
content: "";
width: 100%; height: 100%;
position: absolute; top: 0; left: 0;
border-radius: 50% 50% 50% 0;
border: 1px solid;
background-color: green;
transform: rotate(-45deg);
}
.content {
position: relative;
z-index: 1; /* put bigger z-index than the pseudo element*/
}
<div class="shape">
<div class="content"></div>
</div>
+0
はい私はまったく同じものが欲しいです。助けてくれてありがとう... !!! – Keval
3
デザインは、あなたがしたいことを、同様です。
.tear {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 10em;
height: 10em;
border: none;
-webkit-border-radius: 80% 0 55% 50%/55% 0 80% 50%;
border-radius: 80% 0 55% 50%/55% 0 80% 50%;
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
background: #1abc9c;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-webkit-transform: rotateX(-10.313240312354818deg) rotateY(-5.156620156177409deg) rotateZ(-32.0856365273261deg) ;
transform: rotateX(-10.313240312354818deg) rotateY(-5.156620156177409deg) rotateZ(-32.0856365273261deg) ;
}
<div class="tear">Aditya</div>
+0
それはクールです!でも、私はこの小さなタイルドロップをしようとしていました。あなたの助けをたくさんありがとう... !! – Keval
関連する問題
- 1. HTMLとCSSのみを使用してフローチャート/図を作成する方法
- 2. キャンバスやCSSを使用して図形を描画する方法は?
- 3. このボタン形状CSSのみを作成する方法は?
- 4. ループを使用してp5.jsで図形を作成する
- 5. PythonでForループコーディングを使用して図形を作成する
- 6. ネストされたループを使ってPythonでこの図形を作成する方法はありますか?
- 7. EMFを使用して "ユースケース"図を作成する方法
- 8. Javaを使用してデータフロー図を作成する方法
- 9. CSSを使用してこのシェイプを作成する方法は?
- 10. CSS:図形で背景を作成していますか?
- 11. CSSを使用して、中央の図形を入力して周回する図形をアニメーション化する
- 12. createDocumentFragmentを使用してこれらの要素を作成する方法は?
- 13. リーフレットを使用して画像から地図を作成する方法
- 14. キャンバスでアニメーションを使用して図形を作成
- 15. XLSXWriterを使用して図形を描画する方法
- 16. reStructuredText/Sphinxで浮動図形を作成する方法は?
- 17. Microsoft.Office.Interop.Wordを使用して、ワードドキュメントの図形または図形のテキストを取得する方法
- 18. CSSで非対称の図形を作成することができます
- 19. cssを使って円形の背景を作る方法は?
- 20. CSS3を使用して次の図形を描く方法
- 21. テキストボックス/図形をHTMLのテキストボックス内に作成する方法
- 22. CSS勾配で図形を作成する
- 23. ビジュアルC++で色と図形を持つツールバーを使用してペイントアプリケーションを作成する方法
- 24. AngularJSを使用してhtml形式のjsonオブジェクトを作成する方法は?
- 25. JavaFXで別の図形(円弧)を使用して図形(円)をクリップする方法
- 26. matlabfragまたは代替を使用してLaTeXでMatlab図形を作成
- 27. テキストを使用して図形上にマスクを作成します。
- 28. VBAを使用してPowerpointで図形を定義する方法は?
- 29. JavaFX:図形とテキストを使ってオブジェクトを作成する
- 30. 2D配列を使用して地図を作成する方法
境界半径:50%50%50%0。 – pol
答えをありがとう!私はボトムセンターに置いておきたい一方の側を指しているように見えます。 – Keval