css 技巧和提示

Posted 2021-05-13

/* From http://apps.eky.hk/css-triangle-generator/ */

#triangle {
  width: 0; 
  height: 0; 
  border-style: solid; 
  border-width: 0 100px 100px 100px; 
  border-color: transparent transparent pink transparent;
}

/* OR */

/* Create on DIV */
#arrow:before, #arrow:after { 
  position: absolute; content: ""; width: 0; height: 0; border-style: solid; 
}
		#arrow:after { border-color: transparent transparent #FFF transparent;
			border-width: 9px; top: -18px; left: 21px
		}
		#arrow:before { border-color: transparent transparent pink transparent;
			border-width: 10px; top: -20px; left: 20px;
		}
		

/* How to make a TEXT field and SUBMIT button same height and stick together.  */

input {
  height: 30px; 
  margin: 0; 
  vertical-align: top;
  /* What makes it possible */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;  
}

input[type="text"] { width: 300px; margin: 0; }
input[type="submit"] { width: 100px; margin: 0; }

/* Make sure text box and submit are on SAME LINE with
NO SPACES in BETWEEN each other */