Главная » Языки программирования

Css triangle with rounded corners

Содержание
  1. 32 CSS Triangles
  2. Author
  3. Links
  4. Made with
  5. About a code
  6. Pyramid Triangle: Pure CSS Animation
  7. Author
  8. Links
  9. Made with
  10. About a code
  11. CSS Tri Spinner
  12. Author
  13. Links
  14. Made with
  15. About a code
  16. CSS Only Triangle with Rounded Corners
  17. Author
  18. Links
  19. Made with
  20. About a code
  21. Moving on a Penrose Triangle
  22. Author
  23. Links
  24. Made with
  25. About a code
  26. Slicing Triangles
  27. Author
  28. Links
  29. Made with
  30. About a code
  31. CSS 3D Triangle Spin
  32. Author
  33. Links
  34. Made with
  35. About a code
  36. Bordered Image Triangle
  37. Author
  38. Links
  39. Made with
  40. About a code
  41. Triangle Grid with nth-child
  42. Author
  43. Links
  44. Made with
  45. About a code
  46. Triangle
  47. Author
  48. Links
  49. Made with
  50. About the code
  51. Triangle
  52. Author
  53. Links
  54. Made with
  55. About the code
  56. Rotating Rounded Triangles Animation
  57. Author
  58. Links
  59. Made with
  60. About a code
  61. Landscape in a Triangle
  62. Author
  63. Links
  64. Made with
  65. About a code
  66. Pure CSS Prism Grid Wave
  67. Author
  68. Links
  69. Made with
  70. About the code
  71. CSS Penrose Triangle
  72. Author
  73. Links
  74. Made with
  75. About the code
  76. Pure CSS Animated Triangle Grid
  77. Author
  78. Links
  79. Made with
  80. About the code
  81. Triangle Cutout
  82. Author
  83. Links
  84. Made with
  85. About the code
  86. CSS Triangles
  87. Author
  88. Links
  89. Made with
  90. About the code
  91. Author
  92. Links
  93. Made with
  94. About the code
  95. Pink Triangles
  96. Author
  97. Links
  98. Made with
  99. About the code
  100. Triangle
  101. Author
  102. Links
  103. Made with
  104. About the code
  105. Double Triangle
  106. Author
  107. Links
  108. Made with
  109. About the code
  110. Penrose Triangle
  111. Author
  112. Links
  113. Made with
  114. About the code
  115. Triangles
  116. Author
  117. Links
  118. Made with
  119. About a code
  120. Triangle
  121. Author
  122. Links
  123. Made with
  124. About the code
  125. Penrose Triangle x3
  126. Author
  127. Links
  128. Made with
  129. About the code
  130. Penrose Triangle
  131. Author
  132. Links
  133. Made with
  134. About a code
  135. Reverse clip-path with Blend Modes
  136. Author
  137. Links
  138. Made with
  139. About the code
  140. Quick Gradient Triangle Mixin
  141. Author
  142. Links
  143. Made with
  144. About the code
  145. Chromatic Triangle
  146. Author
  147. Links
  148. Made with
  149. About the code
  150. Negative Triangle SASS Mixin
  151. Author
  152. Links
  153. Made with
  154. About the code
  155. Centroid-Centred CSS Triangle
  156. Author
  157. Creating rounded triangles in CSS with clip-path
  158. By Sebastiano Guerriero Follow author on Twitter
  159. Let’s do this! #
Читайте также:  What is sunrise php

32 CSS Triangles

Collection of hand-picked free HTML and CSS triangle code examples from CodePen, GitHub, and other resources. Update of February 2021 collection. Nine new items.

Author

Made with

About a code

Pyramid Triangle: Pure CSS Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Tri Spinner

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Only Triangle with Rounded Corners

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Moving on a Penrose Triangle

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Slicing Triangles

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS 3D Triangle Spin

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Bordered Image Triangle

Author

Made with

About a code

Bordered Image Triangle

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Triangle Grid with nth-child

Author

Made with

About a code

Triangle Grid with nth-child

Creating a grid of triangles with CSS Grid and custom properties.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Triangle

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Triangle

Animated triangle in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Rotating Rounded Triangles Animation

Rotating rounded triangles animation. Rounded triangles black and white. Pug. SCSS. Animation degrees.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Landscape in a Triangle

Author

Made with

About a code

Landscape in a Triangle

Only-triangles landscape in a triangle. Animated through the seasons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Pure CSS Prism Grid Wave

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS Penrose Triangle

Author

Made with

About the code

CSS Penrose Triangle

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Pure CSS Animated Triangle Grid

ure CSS animated triangle grid pop with grid , variables , clip-path .

Compatible browsers: Chrome, Firefox, Opera, Safari

Demo image: Triangle Cutout

Author

Made with

About the code

Triangle Cutout

Triangle cutout with pseudo-elements.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS Triangles

Author

Made with

About the code

CSS Triangles

CSS triangle / equilateral triangle: arrow with empty space, arrow without empty space, an equilateral triangle.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: △

Author

Made with

About the code

Compatible browsers: Chrome, Firefox, Opera, Safari

Demo image: Pink Triangles

Author

Made with

About the code

Pink Triangles

CSS only pink animated triangles.

Compatible browsers: Chrome, Firefox, Opera, Safari

Demo image: Triangle

Author

Made with

About the code

Triangle

Compatible browsers: Chrome, Firefox, Opera, Safari

Demo image: Double Triangle

Author

Made with

About the code

Double Triangle

Text cards with double triangles.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Penrose Triangle

Author

Made with

About the code

Penrose Triangle

The Penrose Triangle, also known as the impossible tribar, created by the Swedish artist Oscar Reutersvärd. Created using HTML and SCSS only.

Compatible browsers: Chrome, Firefox, Opera, Safari

Demo image: Triangles

Author

Made with

About the code

Triangles

A little CSS representation of the Compilerbau «North Wall» album cover, with a nifty little bonus hover state.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Made with

About a code

Triangle

SVG triangle with GIF background.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Penrose Triangle x3

Author

Made with

About the code

Penrose Triangle x3

Pure CSS penrose triangle x3.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Penrose Triangle

Author

Made with

About the code

Penrose Triangle

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Reverse clip-path with Blend Modes

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Quick gradient triangle mixin

Author

Made with

About the code

Quick Gradient Triangle Mixin

Threw a really quick mixin to make triangle gradients.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Chromatic Triangle

Author

Made with

About the code

Chromatic Triangle

Try to change the $rings value and -30.times do .

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Negative Triangle SASS Mixin

Author

Made with

About the code

Negative Triangle SASS Mixin

Create negative triangles with this SASS mixin that leverages the power of the pseudo elements.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Centroid-Centred CSS Triangle

Author

Made with

About the code

Centroid-Centred CSS Triangle

CSS rotations centre on bounding boxes, so triangles are not rotated on their centroid. Using the :after pseudo-element for the triangle, the original element may be given a height and width to create bounding box centred around the triangle’s centroid.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Triangles

Author

Источник

Creating rounded triangles in CSS with clip-path

In this quick tutorial, we’ll take a look at a practical example where the clip-path property can make your life easier. We’re going to design a CSS triangle that inherits some properties from its parent.

By Sebastiano Guerriero Follow author on Twitter

Creating rounded triangles in CSS with clip-path

A few days ago, we updated the Tooltip component and replaced the ‘border hack’ with the clip-path method to create CSS triangles (the small arrow appearing beside the tooltip).

In this specific case, using clip-path brought a few advantages. We’re going to take a look at them, as well as a few other nifty CSS tricks.

👉 I’m aware the clip-path property is not supported in all browsers. However, it’s currently supported in all major browsers (except Microsoft Edge), so it’s OK to use it if what you’re creating is an enhancement and it won’t break user experience in older browsers.

Let’s do this! #

I’ve put together a video tutorial that explains how to create a ’rounded’ triangle with clip-path. Feel free to skip the video if you prefer to read the article.

Join us on our YouTube channel for more tutorials!

Probably the most popular approach to creating CSS triangles is the border hack:

If you set height and width of an element equal to 0, then apply a transparent border, if you then set only one border color (e.g., border-bottom-color) to any value you want, you end up with a triangle. It’s a cool trick, and we also have a mixin in our framework that does exactly this:

// CSS triangle @mixin triangle ($direction: up, $width: 12px, $color: red) < width: 0; height: 0; border: $width solid transparent; @if( $direction == left ) < border-right-color: $color; >@else if( $direction == right ) < border-left-color: $color; >@else if( $direction == down ) < border-top-color: $color; >@else < border-bottom-color: $color; >>

However, this method has some limitations. If we consider the tooltip case, the triangle can’t inherit the background color of the parent (you’re forced to set a variable, or to update two values). Also, if you set a border on the parent, it’s not easy to set a border on the triangle too (we’re using the border property to create the triangle itself).

An alternative approach would be using inline SVG code. Smart, but not as simple as using a or a pseudo-element.

One method I’ve been experimenting with and that seems cool consists of using the clip-path property:

The idea is simple: we turn a square into a triangle using the clip-path property. To do so, you need to pass to the polygon function three sets of coordinates:

Remember the first coordinate defines the position on the x-axis, while the second one on the y-axis.

clip-path coordinates

What’s the advantage of using clip-path? For starter, we can set both background-color and border values equal to inherit. Anytime you update the style of the tooltip, the triangle is updated as well. Secondly, you can set a border radius and make the triangle. well. rounded. I realize it’s not something you plan on often doing. But still, it’s a neat trick!

What about older browsers? We can use the @support rule to show the triangle only in browsers supporting clip-path. In those that don’t, we hide the triangle.

.triangle < display: none; >@supports (clip-path: inset(50%)) < .triangle < display: block; height: 20px; width: 20px; background-color: inherit; border: inherit; position: absolute; bottom: -10px; left: calc(50% - 10px); clip-path: polygon(0% 0%, 100% 100%, 0% 100%); transform: rotate(-45deg); border-radius: 0 0 0 0.25em; >>

Is it bad? Not in this case, where the tooltip works fine without the little arrow.

Источник

Оцените статью
© 2024 Программирование