Posts

accordion with plus minus icon

Image
  HTML Code 1 2 3 4 5 6 7 <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < title > Bootstrap Accordion with Plus Minus Icon </ title > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" ></ script > < style > .accordion-item-bg-blog {     background-color : aquamarine ; }     /* Custom style */     /* .accordion-button::after {       background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2...
Post a Comment
Read more

Create Shape With CSS

Image
Copy following code: https://bennettfeely.com/clippy/ https://sharkcoder.com/visual/shapes   <! DOCTYPE html > < html > < head > < style > :root {   --arrow-shape : polygon ( 0 0% , 77% -37% , 105% 40% , 100% 101% , 70% 100% , 30% 100% , 0 100% , 0% 30% ); } .parallelogram-outline {   display : inline-block ;   background-color : black ;   clip-path : var ( --arrow-shape );   border : 0.1px solid black ; /* Add a border with a width of 0.1 units to the parallelogram outline */ } .parallelogram {   font-family : sans-serif ;   background-color : #534686 ;   padding : 0.25rem 0.75rem 0.25rem 0.5rem ;   clip-path : var ( --arrow-shape );   border : 0.1px solid black ; /* Add a border with a width of 0.1 units to the parallelogram */ } </ style > < title > Page Title </ title > </ head > < body > < div class = "parallelogram-outline" >   < div class...
Post a Comment
Read more