On a web page, you can create a triangle easily. Use the clip-path property or even the child selector concept can be used. The clip-path allows a user to clip an element to a shape. This shape is to be set polygon to create a triangle. Syntax The syntax of CSS clip-path property is as follows − Selector { clip-path: /*value*/ } Create a Triangle using the clip-path The following example illustrate CSS clip-path property. Here, we have set the clip-path shape to polygon to create a triangle. This is done using the polygon() method ... Read More

Comment box can be created using clip-path propertySyntaxThe syntax of CSS clip-path property is as follows −Selector {    clip-path: /*value*/ }ExampleThe following examples show how we can create a comment box using CSS. Live Demo                    .cb {             position: relative;             padding: 2%;             border-radius: 8%;             width:25%;          }          .cb::after {             content: "";     ... Read More

The ::marker selector is used to select the marker of a list item in CSS. It updates the marker properties on bullets or numbers i.e., unordered or ordered lists. We will use the ::marker selector with the color property to change the bullet color. Syntax The syntax of CSS ::marker selector is as follows − Selector::marker { attribute: /*value*/; } The following examples illustrate CSS ::marker selector. Create a Colored Vertical Bullet List To add a color to the bullet list, set the ::marker selector. The bullet lists get displayed vertically by default. Here, we ... Read More

To style bullets in an unordered list, we can use the list-style property. We will see examples to animate ordered and unordered lists. Syntax The syntax of CSS li-style property as follows − li { list-style: /*value*/ } Style and Animate Unordered List The following example illustrate CSS list-style property to style the list items in an unordered list i.e. . To animate it, we have set styles on hover using the :hover selector − li:hover { box-shadow: -10px 2px 4px 0 blue!important; font-size } Example Let us see an example to style and animate an unordered list on a web page − ... Read More

To set a fixed width for items in CSS flexbox, we will be understanding two different approaches. It is useful when you want some specific items to have a fixed width even if there is space available. In this article, we are having three div items wrapped inside a div container. Our task is to set fixed width for items in CSS flexbox. Approaches to Set Fixed Width for Items in CSS Flexbox Here is a list of approaches for setting a fixed width for items in CSS flexbox which we will be discussing in this article with stepwise ... Read More

We use the appearance property to style an element according to the platform-native style of the user’s operating system. Syntax The syntax of CSS appearance property is as follows − Selector { appearance: /*value*/; -webkit-appearance: /*value*/; /*for Safari and Chrome */ -moz-appearance: /*value*/; /*for Firefox */ } The following examples illustrate CSS appearance property − Hide Dropdown Arrow for Input Type Number In this example, we have shown how to hide the dropdown arrow for the . For that, we gave set the appearance property to none − ... Read More

We use the appearance property to style an element according to the platform-native style of the user’s operating system. Syntax The syntax of CSS appearance property is as follows − Selector { appearance: /*value*/; -webkit-appearance: /*value*/; /*for Safari and Chrome */ -moz-appearance: /*value*/; /*for Firefox */ } Create a Custom Radio Button To create a custom custom checkbox, we have set the following style with border-radius and appearance. The appearance is set to none − input[type=radio] { appearance: none; -webkit-appearance: none; ... Read More

We use the appearance property to style an element according to the platform-native style of the user’s operating system. The custom checkbox looks different from the default checkbox, and after selecting it the appearance will change. Syntax The syntax of CSS appearance property is as follows − Selector { appearance: /*value*/; -webkit-appearance: /*value*/; /*for Safari and Chrome */ -moz-appearance: /*value*/; /*for Firefox */ } Create a Round Custom Checkbox To create a round custom checkbox, we have set the following style with border-radius and box-shadow. The appearance is set ... Read More

We can style the file upload button using the CSS pseudo element ::file-selector-button. However, the full support of this pseudo element is limited to Firefox and Firefox Android. The ::-webkit-file-upload-button is used to support Safari, Chrome and Opera. Syntax The syntax of CSS file-selector property is as follows − Selector::file-selector-button { attribute: /*value*/ } Selector::-webkit-file-upload-button { attribute: /*value*/ } Style File Upload Button With ::file-selector-button The following example illustrate CSS file-selector-button selector. On hover, we have styled it like this − input[type=file]::file-selector-button:hover { cursor: grab; ... Read More

Given two strings ‘a’ and string ‘b’, we have to check if they are anagrams of each other or not and return True/False. For example, Input-1 −String a= “india” String b= “nidia”Output −TrueExplanation − Since the given string ‘b’ contains all the characters in the string ‘a’ thus we will return True.Input-2 −String a= “hackathon” String b= “achcthoon”Output −FalseExplanation − Since the given string ‘b’ doesn’t have all the characters as string ‘a’ have thus we will return False.The approach used to solve this problemIn the given strings ‘a’ and ‘b’, we will check if they are of the same ... Read More