Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to use CSS to realize Nuclear radiation warning Mark

2025-03-31 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/02 Report--

This article "how to use CSS to achieve nuclear radiation warning sign" in addition to programmers most people do not quite understand, today Xiaobian in order to make you a better understanding of "how to use CSS to achieve nuclear radiation warning sign", summed up the following content, has a certain reference value, the detailed steps are clear, details are handled properly, I hope you can get something through this article, let's take a look at the specific content.

Mainly used several attributes of CSS transform-origin/rotate/skewY, do not understand quickly to see ha.

Three div implementations

Nuclear radiation warning sign

Html,body {

Width: 100%

Height: 100%

}

# warning {

Position: absolute

Top: 0

Left: 0

Right: 0

Bottom: 0

Margin: auto

Width: 200px

Height: 200px

Border-radius: 100%

Background-color: yellow

Overflow: hidden

}

. Sector {

Position: absolute

Top: 0

Right: 0

Width: 50%

Height: 50%

Transform-origin: 0% 100%

}

. Sector:nth-child (1) {

Transform: rotate (30deg) skewY (- 30deg)

Background: black

}

. Sector:nth-child (2) {

Transform: rotate (- 90deg) skewY (- 30deg)

Background: black

}

. Sector:nth-child (3) {

Transform: rotate (- 210deg) skewY (- 30deg)

Background: black

}

Six div implementations

Nuclear radiation warning sign

Html,body {

Width: 100%

Height: 100%

}

# warning {

Position: absolute

Top: 0

Left: 0

Right: 0

Bottom: 0

Margin: auto

Width: 200px

Height: 200px

Border-radius: 100%

Overflow: hidden

}

. Sector {

Position: absolute

Top: 0

Right: 0

Width: 50%

Height: 50%

Transform-origin: 0% 100%

}

. Sector:nth-child (1) {

Transform: rotate (30deg) skewY (- 30deg)

Background: black

}

. Sector:nth-child (2) {

Transform: rotate (- 30deg) skewY (- 30deg)

Background: yellow

}

. Sector:nth-child (3) {

Transform: rotate (- 90deg) skewY (- 30deg)

Background: black

}

. Sector:nth-child (4) {

Transform: rotate (- 150deg) skewY (- 30deg)

Background: yellow

}

. Sector:nth-child (5) {

Transform: rotate (- 210deg) skewY (- 30deg)

Background: black

}

. Sector:nth-child (6) {

Transform: rotate (- 270deg) skewY (- 30deg)

Background: yellow

}

Three ways of introducing css 1. Inline style, the most straightforward and simplest, uses style= "" directly for HTML tags. two。 The embedded style is to write the CSS code in between and use the

To make a statement. 3. External style, in which the link style is the most frequently used and the most practical style, only need to add

Just do it. The second is to import styles, import styles and link styles are similar, using @ import style to import CSS stylesheets, not recommended. Thank you for your reading. I hope you have a certain understanding of the key issue of "how to use CSS to achieve nuclear radiation warning signs". The specific usage still needs to be understood by hands-on experiments. Try it quickly. If you want to read more articles about related knowledge points, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report