双箭头CSS

Question

我正在尝试在圆圈中创建一个双箭头，但我只能创建一个。 我以前尝试过使用但没什么可做的。 这是代码：

Ext.define('ExampleTabs', {
    extend: 'Ext.tab.Panel',
    xtype: 'reorderable-tabs',

    requires: [
        'Ext.ux.TabCloseMenu',
        'Ext.ux.TabReorderer'
    ],

    plugins: [
        'tabreorderer',
        'tabclosemenu'
    ],

    defaults: {
        closable: true
    },

    items: [{
        title: 'Tab 0 - fixed',
        html: "Cannot reorder or close this",
        reorderable: false,
        closable: false

    }, {
        title: 'Tab 1',
        html: 'Tab 1'
    }, {
        title: 'Tab 2',
        html: 'Tab 2'
    }, {
        title: 'Tab 3',
        html: 'Tab 3'
    }, {
        title: 'Tab 4',
        html: 'Tab 4'
    }],

});

小提琴： fiddle

Answer 1

我刚刚使用过：在之前复制你使用的CSS：之后，只更改margin-top和position。

    #basso
	{
	  text-align: center;
	  display: inline-block;
	  vertical-align: middle;
	}


	#bottom
	{
	  display: inline-block;
	  border-radius: 50%;	
	}

	#freccia:hover #bottom
	{
	  display: inline-block;
	  border-radius: 50%;
	  border: 0.15em solid #4183D7;
	}

	#freccia:hover #bottom:after
	{
	  border-top: 0.15em solid #4183D7;
	  border-right: 0.15em solid #4183D7;
	}



	#bottom 
	{
	  display: inline-block;
	  width: 3em;
	  height: 3em;
	  border: 0.15em solid #333;
	  border-radius: 50%;
	  margin-left: 0.75em;
	  transition: all 0.1s ease-out;
	  
	  
	}

	#bottom:after 
	{
	  content: '';
	  display: inline-block;
	  margin-top: 0.6em;
	  width: 1.2em;
	  height: 1.2em;
	  border-top: 0.15em solid #333;
	  border-right: 0.15em solid #333;
	  -moz-transform: rotate(135deg);
	  -webkit-transform: rotate(135deg);
	  transform: rotate(135deg);
	  transition: all 0.1s ease-out;
	}
		#bottom:before 
	{
		position: absolute;
	  content: '';
	  display: inline-block;
	  margin-top: 0.3em;
	  width: 1.2em;
	  height: 1.2em;
	  border-top: 0.15em solid #333;
	  border-right: 0.15em solid #333;
	  -moz-transform: rotate(135deg);
	  -webkit-transform: rotate(135deg);
	  transform: rotate(135deg);
	  transition: all 0.1s ease-out;
	}


	#bottom:hover:after
	{
	  content: '';
	  display: inline-block;
	  margin-top: 0.9em;
	  width: 1.2em;
	  height: 1.2em;
	  border-top: 0.15em solid #4183D7;
	  border-right: 0.15em solid #4183D7;
	  -moz-transform: rotate(135deg);
	  -webkit-transform: rotate(135deg);
	  transform: rotate(135deg);
	}
	
	#bottom:hover:before
	{
	  content: '';
	  display: inline-block;
	  margin-top: 0.6em;
	  width: 1.2em;
	  height: 1.2em;
	  border-top: 0.15em solid #4183D7;
	  border-right: 0.15em solid #4183D7;
	  -moz-transform: rotate(135deg);
	  -webkit-transform: rotate(135deg);
	  transform: rotate(135deg);
	}

    <div id="basso">
        <a href="#" id="freccia">
            <span id="bottom"></span>
        </a>
    </div>