2色の背景を作る方法は？

Question

背景をほぼすべて白くするには、どのように1つのCSSクラスを書くことができますか？下の部分が黒い矢印アイコンになるようにしたいです。

.search-rect { 
     width: 160px;     
     height: 200px; 
     padding-top: 5px; 
     padding-bottom: 5px; 
     padding-left: 3px; 
     padding-right: 3px; 
     background-color: #fafafa; 
     border: 1px solid #424242; 
     border-radius: 10px;   
     text-align: center; 
     font-size: 10px; 

     p { 
      line-height: 150%; 
     } 
} 

Answer 1

あなたは::beforeと::after擬似要素を使用することができます。
このように：https://codepen.io/bsalex/pen/WXLpPY

Answer 2

CSS勾配を試してください。 構文は：例えば

background: linear-gradient(direction, color-stop1, color-stop2, ...); 

、

#grad { 
background: blue; /* For browsers that do not support gradients */ 
background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */ 
background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */ 
background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */ 
background: linear-gradient(red, yellow); /* Standard syntax */}